/* Lagos Life design tokens v0.1.1
   GENERATED by 04-system/build/build_tokens.py from 04-system/src/*.json. Do not edit by hand.
   Light on :root, Night on :root.dark (the app sets html.dark).
   --ll-* are primitives. Semantic tokens alias them (--leaf: var(--ll-leaf-500)), so keep them; components never use them directly.
   The [data-mode] blocks at the end are docs-only and can be deleted for production. */

:root {
  color-scheme: light;

  /* primitive / color */
  --ll-base-white: #ffffff;
  --ll-base-black: #000000;
  --ll-base-navy-shadow: #16203c;
  --ll-leaf-300: #4cd393;
  --ll-leaf-500: #22b573;
  --ll-leaf-600: #1fa268;
  --ll-leaf-700: #0f7d4c;
  --ll-leaf-800: #007946;
  --ll-lagoon-50: #e8f1fd;
  --ll-lagoon-400: #62a6f5;
  --ll-lagoon-500: #2f7de1;
  --ll-lagoon-600: #2c6fd1;
  --ll-lagoon-900: #172c45;
  --ll-sunset-400: #f5a24e;
  --ll-sunset-500: #f59e42;
  --ll-sunset-700: #b45309;
  --ll-rose-400: #ff7d8f;
  --ll-rose-500: #ef5a6f;
  --ll-rose-600: #d94d63;
  --ll-rose-700: #c6324e;
  --ll-gold-300: #f5c542;
  --ll-gold-400: #ffc20e;
  --ll-gold-800: #7a5b00;
  --ll-slate-0: #ffffff;
  --ll-slate-50: #f3f5f9;
  --ll-slate-100: #eef2f7;
  --ll-slate-400: #818898;
  --ll-slate-600: #5b6478;
  --ll-slate-900: #1d2433;
  --ll-night-100: #e6edf2;
  --ll-night-200: #d3dee6;
  --ll-night-400: #97aab9;
  --ll-night-500: #6d7f8d;
  --ll-night-800: #1e2f3a;
  --ll-night-900: #15232d;
  --ll-night-950: #0d1820;
  --ll-night-975: #04090d;
  --ll-sky-50: #eaf2ff;
  --ll-sky-100: #e8f1f7;
  --ll-sky-150: #d7e5fb;
  --ll-sky-200: #bfe0f7;
  --ll-sky-800: #16314a;
  --ll-sky-850: #11222f;
  --ll-need-hunger: #f59e42;
  --ll-need-hunger-deep: #aa5800;
  --ll-need-energy: #3b82f6;
  --ll-need-energy-deep: #1e65d7;
  --ll-need-energy-deep-night: #4f97ff;
  --ll-need-fun: #eab308;
  --ll-need-fun-deep: #986400;
  --ll-need-social: #ec4899;
  --ll-need-social-deep: #c81f7b;
  --ll-need-social-deep-night: #fc58a7;
  --ll-need-hygiene: #14b8a6;
  --ll-need-hygiene-deep: #007b6c;
  --ll-need-bladder: #8b5cf6;
  --ll-need-bladder-deep: #7b49e3;
  --ll-need-bladder-deep-night: #a87dff;
  --ll-mood-very-happy: #22c55e;
  --ll-mood-very-happy-deep: #0f7d4c;
  --ll-mood-happy: #4ade80;
  --ll-mood-happy-deep: #008127;
  --ll-mood-fine: #facc15;
  --ll-mood-fine-deep: #936700;
  --ll-mood-uneasy: #fb923c;
  --ll-mood-uneasy-deep: #b35000;
  --ll-mood-miserable: #ef4444;
  --ll-mood-miserable-deep: #ce1d28;
  --ll-mood-miserable-deep-night: #ff5f5b;

  /* semantic / color */
  --leaf: var(--ll-leaf-500);
  --leaf-deep: var(--ll-leaf-700); /* refined */
  --leaf-soft: #22b5731f; /* new */
  --lagoon: var(--ll-lagoon-500);
  --lagoon-soft: var(--ll-lagoon-50);
  --lagoon-deep: var(--ll-lagoon-600); /* refined */
  --sunset: var(--ll-sunset-500);
  --sunset-soft: #f59e421f; /* new */
  --sunset-deep: var(--ll-sunset-700); /* new */
  --rose: var(--ll-rose-500);
  --rose-soft: #ef5a6f1f; /* new */
  --rose-deep: var(--ll-rose-700); /* new */
  --gold: var(--ll-gold-400); /* new */
  --gold-soft: #ffc20e1f; /* new */
  --gold-deep: var(--ll-gold-800); /* new */
  --ink: var(--ll-slate-900);
  --ink-soft: var(--ll-slate-600);
  --ink-placeholder: var(--ink-soft); /* refined */
  --ink-inactive: var(--ll-slate-400); /* new */
  --ink-fill: var(--ll-slate-900); /* refined */
  --ink-on: var(--ll-base-white); /* refined */
  --ink-on-fill: var(--ll-base-white); /* new */
  --paper: var(--ll-slate-0);
  --surface: var(--ll-slate-0); /* refined */
  --mist: var(--ll-slate-50);
  --background: var(--ll-slate-100);
  --card: var(--paper); /* @deprecated → use --paper; no removal scheduled */
  --popover: var(--paper); /* @deprecated → use --paper; no removal scheduled */
  --line: #1d243314;
  --border: var(--line);
  --input: #1d24331f;
  --border-control: #1d243380; /* new */
  --ring: var(--lagoon);
  --fill-lagoon: var(--ll-lagoon-600); /* refined */
  --fill-rose: var(--ll-rose-700); /* refined */
  --fill-leaf-deep: var(--ll-leaf-700); /* refined */
  --foreground: var(--ink);
  --card-foreground: var(--ink);
  --popover-foreground: var(--ink);
  --primary: #15864f; /* refined */
  --primary-foreground: var(--ll-base-white);
  --primary-hover: #13784a; /* new */
  --primary-pressed: #106a41; /* new */
  --primary-lip: #0c5a35; /* new */
  --secondary: var(--mist);
  --secondary-foreground: var(--ink);
  --muted: var(--mist);
  --muted-foreground: var(--ink-soft);
  --accent: var(--lagoon-soft);
  --accent-foreground: var(--ink);
  --destructive: var(--rose);
  --need-hunger: var(--ll-need-hunger); /* new */
  --need-hunger-deep: var(--ll-need-hunger-deep); /* new */
  --need-energy: var(--ll-need-energy); /* new */
  --need-energy-deep: var(--ll-need-energy-deep); /* new */
  --need-fun: var(--ll-need-fun); /* new */
  --need-fun-deep: var(--ll-need-fun-deep); /* new */
  --need-social: var(--ll-need-social); /* new */
  --need-social-deep: var(--ll-need-social-deep); /* new */
  --need-hygiene: var(--ll-need-hygiene); /* new */
  --need-hygiene-deep: var(--ll-need-hygiene-deep); /* new */
  --need-bladder: var(--ll-need-bladder); /* new */
  --need-bladder-deep: var(--ll-need-bladder-deep); /* new */
  --mood-very-happy: var(--ll-mood-very-happy); /* new */
  --mood-very-happy-deep: var(--ll-mood-very-happy-deep); /* new */
  --mood-happy: var(--ll-mood-happy); /* new */
  --mood-happy-deep: var(--ll-mood-happy-deep); /* new */
  --mood-fine: var(--ll-mood-fine); /* new */
  --mood-fine-deep: var(--ll-mood-fine-deep); /* new */
  --mood-uneasy: var(--ll-mood-uneasy); /* new */
  --mood-uneasy-deep: var(--ll-mood-uneasy-deep); /* new */
  --mood-miserable: var(--ll-mood-miserable); /* new */
  --mood-miserable-deep: var(--ll-mood-miserable-deep); /* new */

  /* semantic / font */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Twemoji Mozilla", system-ui; /* refined */
  --weight-regular: 400; /* new */
  --weight-medium: 500; /* new */
  --weight-semibold: 600; /* new */
  --weight-bold: 700; /* new */
  --weight-extrabold: 800; /* refined */

  /* semantic / type */
  --type-display: 600 32px/36px var(--font-display); /* new */
  --type-wordmark: 600 36px/40px var(--font-display);
  --type-wordmark-tracking: -0.025em;
  --type-title-lg: 600 24px/32px var(--font-display);
  --type-title: 600 20px/28px var(--font-display);
  --type-title-sm: 600 18px/24px var(--font-display); /* refined */
  --type-label-lg: 600 16px/24px var(--font-body);
  --type-body-lg: 400 16px/24px var(--font-body);
  --type-body: 400 15px/22px var(--font-body); /* refined */
  --type-body-sm: 400 14px/20px var(--font-body);
  --type-label: 600 13px/18px var(--font-body); /* refined */
  --type-label-sm: 600 12px/16px var(--font-body);
  --type-micro: 600 11px/16px var(--font-body); /* refined */

  /* semantic / type-size */
  --type-display-size: 32px; /* new */
  --type-wordmark-size: 36px; /* new */
  --type-title-lg-size: 24px; /* new */
  --type-title-size: 20px; /* new */
  --type-title-sm-size: 18px; /* new */
  --type-label-lg-size: 16px; /* new */
  --type-body-lg-size: 16px; /* new */
  --type-body-size: 15px; /* new */
  --type-body-sm-size: 14px; /* new */
  --type-label-size: 13px; /* new */
  --type-label-sm-size: 12px; /* new */
  --type-micro-size: 11px; /* new */

  /* semantic / type-leading */
  --type-display-leading: 36px; /* new */
  --type-wordmark-leading: 40px; /* new */
  --type-title-lg-leading: 32px; /* new */
  --type-title-leading: 28px; /* new */
  --type-title-sm-leading: 24px; /* new */
  --type-label-lg-leading: 24px; /* new */
  --type-body-lg-leading: 24px; /* new */
  --type-body-leading: 22px; /* new */
  --type-body-sm-leading: 20px; /* new */
  --type-label-leading: 18px; /* new */
  --type-label-sm-leading: 16px; /* new */
  --type-micro-leading: 16px; /* new */

  /* semantic / tracking */
  --tracking-caps: 0.025em;
  --tracking-numeric: 0em; /* new */

  /* semantic / space */
  --space-0-5: 2px; /* new */
  --space-1: 4px; /* new */
  --space-1-5: 6px; /* new */
  --space-2: 8px; /* new */
  --space-2-5: 10px; /* new */
  --space-3: 12px; /* new */
  --space-3-5: 14px; /* new */
  --space-4: 16px; /* new */
  --space-5: 20px; /* new */
  --space-6: 24px; /* new */
  --space-8: 32px; /* new */
  --space-10: 40px; /* new */
  --space-12: 48px; /* new */
  --gutter-hud: 12px; /* new */
  --pad-sheet: 20px; /* new */

  /* semantic / size */
  --tap-min: 44px; /* new */
  --control-sm: 36px; /* new */
  --control-md: 44px; /* new */
  --control-lg: 56px; /* new */
  --icon-xs: 14px; /* new */
  --icon-sm: 16px; /* new */
  --icon-md: 20px; /* new */
  --icon-lg: 24px; /* new */
  --emoji-sm: 16px; /* refined */
  --emoji-md: 20px; /* refined */
  --emoji-lg: 24px; /* new */
  --emoji-xl: 28px; /* new */
  --emoji-circle-sm: 28px; /* new */
  --emoji-circle-md: 36px; /* new */
  --emoji-circle-lg: 44px; /* new */
  --emoji-tile: 58px; /* new */
  --max-w-panel: 448px; /* new */
  --max-w-hud: 672px; /* new */
  --bp-narrow: 380px; /* new */
  --bp-tablet: 768px; /* new */
  --bp-desktop: 1024px; /* new */
  --bp-height-compact: 700px; /* new */
  --bp-height-tall: 780px; /* new */

  /* semantic / icon-stroke */
  --icon-stroke-xs: 2.6; /* refined */
  --icon-stroke-sm: 2.4; /* refined */
  --icon-stroke-md: 2.2; /* refined */
  --icon-stroke-lg: 2; /* refined */

  /* semantic / safe-area */
  --inapp: 0px;
  --top: calc(max(env(safe-area-inset-top), 10px) + var(--inapp));
  --bottom: max(env(safe-area-inset-bottom), 10px); /* new */
  --bottom-sheet: max(env(safe-area-inset-bottom), 16px); /* refined */

  /* semantic / zone */
  --zone-top-bar: 48px; /* new */
  --zone-top-row: 44px; /* new */
  --zone-top: calc(var(--top) + var(--zone-top-bar) + var(--space-2) + var(--zone-top-row)); /* new */
  --zone-bottom-bar: 62px; /* refined */
  --zone-bottom: calc(var(--tab-bar-bottom) + var(--zone-bottom-bar) + var(--space-3)); /* refined */
  --zone-world-min: clamp(150px, calc(100cqh - 509px), 330px); /* new */
  --zone-sheet-max: calc(100cqh - var(--zone-top) - var(--zone-world-min) - var(--zone-bottom)); /* new */
  --zone-side: 360px; /* new */

  /* semantic / radius */
  --radius: 1rem;
  --radius-sm: 12px; /* refined */
  --radius-tile: 16px; /* new */
  --radius-card: 20px; /* new */
  --radius-panel: 26px; /* new */
  --radius-sheet: var(--radius-panel); /* refined */
  --radius-full: 9999px; /* new */

  /* semantic / surface */
  --surface-glass-control: #ffffffeb; /* new */
  --surface-glass-panel: #fffffff7; /* refined */
  --surface-glass-dark: #0000008c; /* refined */
  --surface-toast: #fffffff2; /* new */
  --border-glass: #ffffffb3; /* new */
  --scrim-modal: #1d243380; /* new */
  --scrim-sheet: #0000001a; /* new */
  --border-glass-dark: #ffffff1a; /* new */
  --surface-dark-solid: var(--ll-night-950); /* new */

  /* semantic / blur */
  --blur-glass: 16px; /* refined */
  --blur-scrim: 8px; /* new */

  /* semantic / filter */
  --glass-saturate: 1.4; /* new */

  /* semantic / gradient */
  --gradient-sky: linear-gradient(180deg, var(--ll-sky-200) 0%, var(--ll-sky-100) 45%, var(--ll-slate-100) 100%);
  --gradient-avatar: linear-gradient(180deg, var(--ll-sky-50) 0%, var(--ll-sky-150) 100%);

  /* semantic / shadow */
  --shadow-flat: 0 1px 2px 0 #16203c0f, 0 4px 14px 0 #16203c0f; /* new */
  --shadow-glass: inset 0 1px 0 0 #ffffffcc, 0 8px 28px 0 #16203c24; /* new */
  --shadow-raised: 0 8px 28px 0 #16203c29; /* new */
  --shadow-overlay: 0 20px 50px 0 #16203c33; /* new */
  --shadow-lip-rest: 0 4px 0 0 var(--primary-lip), 0 10px 18px -10px #00000066; /* new */
  --shadow-lip-hover: 0 5px 0 0 var(--primary-lip), 0 14px 22px -12px #00000073; /* new */
  --shadow-lip-pressed: 0 0 0 0 var(--primary-lip), 0 2px 4px -2px #0000004c; /* new */
  --glow-gold: 0 0 14px 0 #fcd34db3;
  --glow-gold-rest: 0 0 0 0 #facc1573; /* new */
  --glow-gold-peak: 0 0 18px 4px #facc1559; /* new */
  --pulse-ring-start: 0 0 0 0 #ffc20eb3; /* new */
  --pulse-ring-end: 0 0 0 14px #ffc20e00; /* new */

  /* semantic / z */
  --z-world-ui: 10; /* new */
  --z-hud: 20; /* new */
  --z-popover: 40; /* new */
  --z-sheet: 50; /* new */
  --z-modal: 70; /* new */
  --z-toast: 90; /* new */
  --z-system: 100; /* new */

  /* semantic / duration */
  --duration-press: 120ms; /* new */
  --duration-lip-press: 60ms; /* new */
  --duration-lip-release: 180ms; /* new */
  --duration-state: 150ms; /* new */
  --duration-message: 220ms; /* new */
  --duration-enter: 300ms; /* new */
  --duration-sheet: 450ms; /* new */
  --duration-pop: 260ms; /* new */
  --duration-bubble: 350ms; /* new */
  --duration-spring: 420ms; /* new */
  --duration-glow: 1400ms; /* new */
  --duration-pulse: 2000ms; /* new */
  --duration-float: 2600ms; /* new */
  --duration-flash: 380ms; /* new */
  --duration-shake: 450ms; /* new */
  --duration-rise: 700ms; /* new */
  --duration-ring: 1600ms; /* new */
  --duration-goal: 3200ms; /* new */

  /* semantic / ease */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* new */
  --ease-out: cubic-bezier(0, 0, 0.58, 1); /* new */
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); /* new */
  --ease-sheet: cubic-bezier(0.22, 1, 0.36, 1); /* new */
  --ease-scrim: cubic-bezier(0.32, 0.72, 0, 1); /* new */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* new */
  --ease-pulse: cubic-bezier(0.4, 0, 0.6, 1); /* new */
  --ease-rise: cubic-bezier(0.2, 0.7, 0.2, 1); /* new */
  --ease-lip: cubic-bezier(0.2, 0.8, 0.2, 1); /* new */

  /* semantic / state */
  --state-hover: 0.08; /* new */
  --state-pressed: 0.1; /* new */
  --press-scale: 0.97;
  --lip-depth: 4px; /* new */
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-halo: var(--paper); /* new */
  --state-success-hold: 2000ms; /* new */
  --state-confirm-window: 3000ms; /* new */

  /* component / button */
  --button-danger-fill: var(--rose-deep); /* new */
  --button-danger-label: var(--ink-on); /* new */
  --button-special-fill: var(--gold); /* new */
  --button-special-label: var(--ll-slate-900); /* new */

  /* component / icon-button */
  --icon-button-topup-size: 28px;

  /* component / chip-row */
  --chip-row-fade: 24px; /* new */

  /* component / field */
  --field-height: 48px;

  /* component / switch */
  --switch-width: 48px; /* new */
  --switch-height: 28px; /* new */
  --switch-thumb: 22px; /* new */

  /* component / checkbox */
  --checkbox-size: 22px; /* new */
  --checkbox-radius: 6px; /* new */

  /* component / slider */
  --slider-track: 6px; /* new */
  --slider-thumb: 24px; /* new */

  /* component / swatch */
  --swatch-size: 40px;

  /* component / spinner */
  --spinner-duration: 800ms; /* new */

  /* component / ipo */
  --ipo-ink: #1d2433;
  --ipo-navy: #262c55;
  --ipo-paper: #f8fafd;
  --ipo-fill: #262c55;
  --ipo-accent: #ff5805;
  --ipo-on-accent: #1d2433; /* refined */

  /* component / containers-nav-game-5d */
  --sheet-handle-width: 96px;
  --sheet-handle-height: 4px;
  --sheet-handle-color: var(--border-control); /* refined */
  --sheet-stop-bar: 70px; /* new */
  --sheet-stop-peek: 178px; /* new */
  --sheet-stop-full: 343px;
  --sheet-cover-max: 0.85; /* refined */
  --tab-bar-height: 62px; /* refined */
  --tab-height: 54px; /* refined */
  --tab-bar-active: #0f7d4c; /* refined */
  --tab-bar-inactive: #4a5367; /* refined */
  --tab-bar-active-fill: var(--leaf-soft); /* refined */
  --tab-bar-bottom: 21px; /* refined */
  --tab-bar-peek-width: 30px; /* new */
  --tab-bar-peek-height: 50px; /* new */
  --tab-bar-peek-radius: 8px; /* new */
  --tab-bar-peek-rise: 4px; /* new */
  --tab-bar-peek-nudge: 3px; /* new */
  --tab-bar-peek-tilt: -11deg; /* new */
  --status-bar-height: 48px;
  --live-stats-height: 32px; /* refined */
  --live-stats-dot: 6px;
  --needs-bar-height: 8px;
  --needs-bar-height-sm: 6px; /* refined */
  --needs-ring-size: 44px; /* new */
  --needs-ring-stroke: 4px; /* new */
  --name-tag-height: 21px;
  --avatar-xs: 26px;
  --avatar-sm: 36px;
  --avatar-md: 40px;
  --avatar-lg: 48px;
  --badge-size: 18px; /* refined */
  --badge-new-height: 16px; /* refined */
  --toast-offset: 64px;
  --toast-width: 356px;
  --toast-duration: 4000ms;
  --toast-duration-info: 8000ms; /* new */
  --modal-width: 350px;
  --popover-width: 256px;
  --action-card-min-width: 150px;
  --action-card-min-height: 139px;
  --streak-day-size: 40px;
  --reward-rep-gradient: linear-gradient(135deg, #1e1b4b 0%, #3730a3 100%);
  --reward-float-distance: 150px;
  --phone-radius: 44px;
  --phone-bezel: 10px;
  --phone-wallpaper: linear-gradient(180deg, #353a9b 0%, #773fdf 40%, #eea542 100%);
  --phone-label-shadow: 0 1px 2px 0 #000000a6; /* refined */
  --app-tile-size: 58px;
  --app-tile-emoji: 28px;
  --phone-frame: #111318;
  --phone-clock-size: 64px;
  --ink-positive: var(--ink); /* refined */
}

:root.dark {
  color-scheme: dark;

  /* semantic / color */
  --leaf: var(--ll-leaf-600);
  --leaf-deep: var(--ll-leaf-300);
  --leaf-soft: #1fa2681f;
  --lagoon: var(--ll-lagoon-400);
  --lagoon-soft: var(--ll-lagoon-900);
  --lagoon-deep: var(--ll-lagoon-400);
  --sunset: var(--ll-sunset-400);
  --sunset-soft: #f5a24e1f;
  --sunset-deep: var(--ll-sunset-400);
  --rose: var(--ll-rose-400);
  --rose-soft: #ff7d8f1f;
  --rose-deep: var(--ll-rose-400);
  --gold-deep: var(--ll-gold-400);
  --ink: var(--ll-night-100);
  --ink-soft: var(--ll-night-400);
  --ink-inactive: var(--ll-night-500);
  --ink-fill: var(--ll-night-200);
  --ink-on: var(--ll-night-950);
  --paper: var(--ll-night-900);
  --surface: var(--ll-night-900);
  --mist: var(--ll-night-800);
  --background: var(--ll-night-950);
  --line: #ffffff14;
  --input: #ffffff24;
  --border-control: #ffffff59;
  --need-hunger-deep: var(--ll-need-hunger);
  --need-energy-deep: var(--ll-need-energy-deep-night);
  --need-fun-deep: var(--ll-need-fun);
  --need-social-deep: var(--ll-need-social-deep-night);
  --need-hygiene-deep: var(--ll-need-hygiene);
  --need-bladder-deep: var(--ll-need-bladder-deep-night);
  --mood-very-happy-deep: var(--ll-mood-very-happy);
  --mood-happy-deep: var(--ll-mood-happy);
  --mood-fine-deep: var(--ll-mood-fine);
  --mood-uneasy-deep: var(--ll-mood-uneasy);
  --mood-miserable-deep: var(--ll-mood-miserable-deep-night);

  /* semantic / surface */
  --surface-glass-control: #15232de6;
  --surface-glass-panel: #15232df7;
  --surface-toast: #15232df2;
  --border-glass: #ffffff12;
  --scrim-modal: #04090d99;
  --scrim-sheet: #04090d8c;

  /* semantic / gradient */
  --gradient-sky: linear-gradient(180deg, var(--ll-sky-800) 0%, var(--ll-sky-850) 55%, var(--ll-night-950) 100%);

  /* semantic / shadow */
  --shadow-flat: 0 1px 2px 0 #00000040, 0 4px 14px 0 #00000033;
  --shadow-glass: inset 0 1px 0 0 #ffffff0d, 0 8px 28px 0 #00000059;
  --shadow-raised: 0 8px 28px 0 #00000073;
  --shadow-overlay: 0 20px 50px 0 #00000099;

  /* component / ipo */
  --ipo-ink: #f5f6fb;
  --ipo-navy: #c3c9f5;
  --ipo-paper: #1b2330;
  --ipo-fill: #3b4580;
  --ipo-accent: #ff6a1f;

  /* component / containers-nav-game-5d */
  --tab-bar-active: #45d08e;
  --tab-bar-inactive: #8b9aa9;
  --ink-positive: var(--leaf-deep);
}

/* Docs helper scopes (not needed by the app).
   [data-mode="light"] and [data-mode="night"] re-declare every semantic and component token,
   so a specimen can show Light and Night side by side on one page whatever the page mode is. */
[data-mode="light"] {
  color-scheme: light;

  /* semantic / color */
  --leaf: var(--ll-leaf-500);
  --leaf-deep: var(--ll-leaf-700);
  --leaf-soft: #22b5731f;
  --lagoon: var(--ll-lagoon-500);
  --lagoon-soft: var(--ll-lagoon-50);
  --lagoon-deep: var(--ll-lagoon-600);
  --sunset: var(--ll-sunset-500);
  --sunset-soft: #f59e421f;
  --sunset-deep: var(--ll-sunset-700);
  --rose: var(--ll-rose-500);
  --rose-soft: #ef5a6f1f;
  --rose-deep: var(--ll-rose-700);
  --gold: var(--ll-gold-400);
  --gold-soft: #ffc20e1f;
  --gold-deep: var(--ll-gold-800);
  --ink: var(--ll-slate-900);
  --ink-soft: var(--ll-slate-600);
  --ink-placeholder: var(--ink-soft);
  --ink-inactive: var(--ll-slate-400);
  --ink-fill: var(--ll-slate-900);
  --ink-on: var(--ll-base-white);
  --ink-on-fill: var(--ll-base-white);
  --paper: var(--ll-slate-0);
  --surface: var(--ll-slate-0);
  --mist: var(--ll-slate-50);
  --background: var(--ll-slate-100);
  --card: var(--paper);
  --popover: var(--paper);
  --line: #1d243314;
  --border: var(--line);
  --input: #1d24331f;
  --border-control: #1d243380;
  --ring: var(--lagoon);
  --fill-lagoon: var(--ll-lagoon-600);
  --fill-rose: var(--ll-rose-700);
  --fill-leaf-deep: var(--ll-leaf-700);
  --foreground: var(--ink);
  --card-foreground: var(--ink);
  --popover-foreground: var(--ink);
  --primary: #15864f;
  --primary-foreground: var(--ll-base-white);
  --primary-hover: #13784a;
  --primary-pressed: #106a41;
  --primary-lip: #0c5a35;
  --secondary: var(--mist);
  --secondary-foreground: var(--ink);
  --muted: var(--mist);
  --muted-foreground: var(--ink-soft);
  --accent: var(--lagoon-soft);
  --accent-foreground: var(--ink);
  --destructive: var(--rose);
  --need-hunger: var(--ll-need-hunger);
  --need-hunger-deep: var(--ll-need-hunger-deep);
  --need-energy: var(--ll-need-energy);
  --need-energy-deep: var(--ll-need-energy-deep);
  --need-fun: var(--ll-need-fun);
  --need-fun-deep: var(--ll-need-fun-deep);
  --need-social: var(--ll-need-social);
  --need-social-deep: var(--ll-need-social-deep);
  --need-hygiene: var(--ll-need-hygiene);
  --need-hygiene-deep: var(--ll-need-hygiene-deep);
  --need-bladder: var(--ll-need-bladder);
  --need-bladder-deep: var(--ll-need-bladder-deep);
  --mood-very-happy: var(--ll-mood-very-happy);
  --mood-very-happy-deep: var(--ll-mood-very-happy-deep);
  --mood-happy: var(--ll-mood-happy);
  --mood-happy-deep: var(--ll-mood-happy-deep);
  --mood-fine: var(--ll-mood-fine);
  --mood-fine-deep: var(--ll-mood-fine-deep);
  --mood-uneasy: var(--ll-mood-uneasy);
  --mood-uneasy-deep: var(--ll-mood-uneasy-deep);
  --mood-miserable: var(--ll-mood-miserable);
  --mood-miserable-deep: var(--ll-mood-miserable-deep);

  /* semantic / font */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Twemoji Mozilla", system-ui;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* semantic / type */
  --type-display: 600 32px/36px var(--font-display);
  --type-wordmark: 600 36px/40px var(--font-display);
  --type-wordmark-tracking: -0.025em;
  --type-title-lg: 600 24px/32px var(--font-display);
  --type-title: 600 20px/28px var(--font-display);
  --type-title-sm: 600 18px/24px var(--font-display);
  --type-label-lg: 600 16px/24px var(--font-body);
  --type-body-lg: 400 16px/24px var(--font-body);
  --type-body: 400 15px/22px var(--font-body);
  --type-body-sm: 400 14px/20px var(--font-body);
  --type-label: 600 13px/18px var(--font-body);
  --type-label-sm: 600 12px/16px var(--font-body);
  --type-micro: 600 11px/16px var(--font-body);

  /* semantic / type-size */
  --type-display-size: 32px;
  --type-wordmark-size: 36px;
  --type-title-lg-size: 24px;
  --type-title-size: 20px;
  --type-title-sm-size: 18px;
  --type-label-lg-size: 16px;
  --type-body-lg-size: 16px;
  --type-body-size: 15px;
  --type-body-sm-size: 14px;
  --type-label-size: 13px;
  --type-label-sm-size: 12px;
  --type-micro-size: 11px;

  /* semantic / type-leading */
  --type-display-leading: 36px;
  --type-wordmark-leading: 40px;
  --type-title-lg-leading: 32px;
  --type-title-leading: 28px;
  --type-title-sm-leading: 24px;
  --type-label-lg-leading: 24px;
  --type-body-lg-leading: 24px;
  --type-body-leading: 22px;
  --type-body-sm-leading: 20px;
  --type-label-leading: 18px;
  --type-label-sm-leading: 16px;
  --type-micro-leading: 16px;

  /* semantic / tracking */
  --tracking-caps: 0.025em;
  --tracking-numeric: 0em;

  /* semantic / space */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --gutter-hud: 12px;
  --pad-sheet: 20px;

  /* semantic / size */
  --tap-min: 44px;
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 56px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --emoji-sm: 16px;
  --emoji-md: 20px;
  --emoji-lg: 24px;
  --emoji-xl: 28px;
  --emoji-circle-sm: 28px;
  --emoji-circle-md: 36px;
  --emoji-circle-lg: 44px;
  --emoji-tile: 58px;
  --max-w-panel: 448px;
  --max-w-hud: 672px;
  --bp-narrow: 380px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-height-compact: 700px;
  --bp-height-tall: 780px;

  /* semantic / icon-stroke */
  --icon-stroke-xs: 2.6;
  --icon-stroke-sm: 2.4;
  --icon-stroke-md: 2.2;
  --icon-stroke-lg: 2;

  /* semantic / safe-area */
  --inapp: 0px;
  --top: calc(max(env(safe-area-inset-top), 10px) + var(--inapp));
  --bottom: max(env(safe-area-inset-bottom), 10px);
  --bottom-sheet: max(env(safe-area-inset-bottom), 16px);

  /* semantic / zone */
  --zone-top-bar: 48px;
  --zone-top-row: 44px;
  --zone-top: calc(var(--top) + var(--zone-top-bar) + var(--space-2) + var(--zone-top-row));
  --zone-bottom-bar: 62px;
  --zone-bottom: calc(var(--tab-bar-bottom) + var(--zone-bottom-bar) + var(--space-3));
  --zone-world-min: clamp(150px, calc(100cqh - 509px), 330px);
  --zone-sheet-max: calc(100cqh - var(--zone-top) - var(--zone-world-min) - var(--zone-bottom));
  --zone-side: 360px;

  /* semantic / radius */
  --radius: 1rem;
  --radius-sm: 12px;
  --radius-tile: 16px;
  --radius-card: 20px;
  --radius-panel: 26px;
  --radius-sheet: var(--radius-panel);
  --radius-full: 9999px;

  /* semantic / surface */
  --surface-glass-control: #ffffffeb;
  --surface-glass-panel: #fffffff7;
  --surface-glass-dark: #0000008c;
  --surface-toast: #fffffff2;
  --border-glass: #ffffffb3;
  --scrim-modal: #1d243380;
  --scrim-sheet: #0000001a;
  --border-glass-dark: #ffffff1a;
  --surface-dark-solid: var(--ll-night-950);

  /* semantic / blur */
  --blur-glass: 16px;
  --blur-scrim: 8px;

  /* semantic / filter */
  --glass-saturate: 1.4;

  /* semantic / gradient */
  --gradient-sky: linear-gradient(180deg, var(--ll-sky-200) 0%, var(--ll-sky-100) 45%, var(--ll-slate-100) 100%);
  --gradient-avatar: linear-gradient(180deg, var(--ll-sky-50) 0%, var(--ll-sky-150) 100%);

  /* semantic / shadow */
  --shadow-flat: 0 1px 2px 0 #16203c0f, 0 4px 14px 0 #16203c0f;
  --shadow-glass: inset 0 1px 0 0 #ffffffcc, 0 8px 28px 0 #16203c24;
  --shadow-raised: 0 8px 28px 0 #16203c29;
  --shadow-overlay: 0 20px 50px 0 #16203c33;
  --shadow-lip-rest: 0 4px 0 0 var(--primary-lip), 0 10px 18px -10px #00000066;
  --shadow-lip-hover: 0 5px 0 0 var(--primary-lip), 0 14px 22px -12px #00000073;
  --shadow-lip-pressed: 0 0 0 0 var(--primary-lip), 0 2px 4px -2px #0000004c;
  --glow-gold: 0 0 14px 0 #fcd34db3;
  --glow-gold-rest: 0 0 0 0 #facc1573;
  --glow-gold-peak: 0 0 18px 4px #facc1559;
  --pulse-ring-start: 0 0 0 0 #ffc20eb3;
  --pulse-ring-end: 0 0 0 14px #ffc20e00;

  /* semantic / z */
  --z-world-ui: 10;
  --z-hud: 20;
  --z-popover: 40;
  --z-sheet: 50;
  --z-modal: 70;
  --z-toast: 90;
  --z-system: 100;

  /* semantic / duration */
  --duration-press: 120ms;
  --duration-lip-press: 60ms;
  --duration-lip-release: 180ms;
  --duration-state: 150ms;
  --duration-message: 220ms;
  --duration-enter: 300ms;
  --duration-sheet: 450ms;
  --duration-pop: 260ms;
  --duration-bubble: 350ms;
  --duration-spring: 420ms;
  --duration-glow: 1400ms;
  --duration-pulse: 2000ms;
  --duration-float: 2600ms;
  --duration-flash: 380ms;
  --duration-shake: 450ms;
  --duration-rise: 700ms;
  --duration-ring: 1600ms;
  --duration-goal: 3200ms;

  /* semantic / ease */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-sheet: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-scrim: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pulse: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-rise: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-lip: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* semantic / state */
  --state-hover: 0.08;
  --state-pressed: 0.1;
  --press-scale: 0.97;
  --lip-depth: 4px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-halo: var(--paper);
  --state-success-hold: 2000ms;
  --state-confirm-window: 3000ms;

  /* component / button */
  --button-danger-fill: var(--rose-deep);
  --button-danger-label: var(--ink-on);
  --button-special-fill: var(--gold);
  --button-special-label: var(--ll-slate-900);

  /* component / icon-button */
  --icon-button-topup-size: 28px;

  /* component / chip-row */
  --chip-row-fade: 24px;

  /* component / field */
  --field-height: 48px;

  /* component / switch */
  --switch-width: 48px;
  --switch-height: 28px;
  --switch-thumb: 22px;

  /* component / checkbox */
  --checkbox-size: 22px;
  --checkbox-radius: 6px;

  /* component / slider */
  --slider-track: 6px;
  --slider-thumb: 24px;

  /* component / swatch */
  --swatch-size: 40px;

  /* component / spinner */
  --spinner-duration: 800ms;

  /* component / ipo */
  --ipo-ink: #1d2433;
  --ipo-navy: #262c55;
  --ipo-paper: #f8fafd;
  --ipo-fill: #262c55;
  --ipo-accent: #ff5805;
  --ipo-on-accent: #1d2433;

  /* component / containers-nav-game-5d */
  --sheet-handle-width: 96px;
  --sheet-handle-height: 4px;
  --sheet-handle-color: var(--border-control);
  --sheet-stop-bar: 70px;
  --sheet-stop-peek: 178px;
  --sheet-stop-full: 343px;
  --sheet-cover-max: 0.85;
  --tab-bar-height: 62px;
  --tab-height: 54px;
  --tab-bar-active: #0f7d4c;
  --tab-bar-inactive: #4a5367;
  --tab-bar-active-fill: var(--leaf-soft);
  --tab-bar-bottom: 21px;
  --tab-bar-peek-width: 30px;
  --tab-bar-peek-height: 50px;
  --tab-bar-peek-radius: 8px;
  --tab-bar-peek-rise: 4px;
  --tab-bar-peek-nudge: 3px;
  --tab-bar-peek-tilt: -11deg;
  --status-bar-height: 48px;
  --live-stats-height: 32px;
  --live-stats-dot: 6px;
  --needs-bar-height: 8px;
  --needs-bar-height-sm: 6px;
  --needs-ring-size: 44px;
  --needs-ring-stroke: 4px;
  --name-tag-height: 21px;
  --avatar-xs: 26px;
  --avatar-sm: 36px;
  --avatar-md: 40px;
  --avatar-lg: 48px;
  --badge-size: 18px;
  --badge-new-height: 16px;
  --toast-offset: 64px;
  --toast-width: 356px;
  --toast-duration: 4000ms;
  --toast-duration-info: 8000ms;
  --modal-width: 350px;
  --popover-width: 256px;
  --action-card-min-width: 150px;
  --action-card-min-height: 139px;
  --streak-day-size: 40px;
  --reward-rep-gradient: linear-gradient(135deg, #1e1b4b 0%, #3730a3 100%);
  --reward-float-distance: 150px;
  --phone-radius: 44px;
  --phone-bezel: 10px;
  --phone-wallpaper: linear-gradient(180deg, #353a9b 0%, #773fdf 40%, #eea542 100%);
  --phone-label-shadow: 0 1px 2px 0 #000000a6;
  --app-tile-size: 58px;
  --app-tile-emoji: 28px;
  --phone-frame: #111318;
  --phone-clock-size: 64px;
  --ink-positive: var(--ink);
}

[data-mode="night"] {
  color-scheme: dark;

  /* semantic / color */
  --leaf: var(--ll-leaf-600);
  --leaf-deep: var(--ll-leaf-300);
  --leaf-soft: #1fa2681f;
  --lagoon: var(--ll-lagoon-400);
  --lagoon-soft: var(--ll-lagoon-900);
  --lagoon-deep: var(--ll-lagoon-400);
  --sunset: var(--ll-sunset-400);
  --sunset-soft: #f5a24e1f;
  --sunset-deep: var(--ll-sunset-400);
  --rose: var(--ll-rose-400);
  --rose-soft: #ff7d8f1f;
  --rose-deep: var(--ll-rose-400);
  --gold: var(--ll-gold-400);
  --gold-soft: #ffc20e1f;
  --gold-deep: var(--ll-gold-400);
  --ink: var(--ll-night-100);
  --ink-soft: var(--ll-night-400);
  --ink-placeholder: var(--ink-soft);
  --ink-inactive: var(--ll-night-500);
  --ink-fill: var(--ll-night-200);
  --ink-on: var(--ll-night-950);
  --ink-on-fill: var(--ll-base-white);
  --paper: var(--ll-night-900);
  --surface: var(--ll-night-900);
  --mist: var(--ll-night-800);
  --background: var(--ll-night-950);
  --card: var(--paper);
  --popover: var(--paper);
  --line: #ffffff14;
  --border: var(--line);
  --input: #ffffff24;
  --border-control: #ffffff59;
  --ring: var(--lagoon);
  --fill-lagoon: var(--ll-lagoon-600);
  --fill-rose: var(--ll-rose-700);
  --fill-leaf-deep: var(--ll-leaf-700);
  --foreground: var(--ink);
  --card-foreground: var(--ink);
  --popover-foreground: var(--ink);
  --primary: #15864f;
  --primary-foreground: var(--ll-base-white);
  --primary-hover: #13784a;
  --primary-pressed: #106a41;
  --primary-lip: #0c5a35;
  --secondary: var(--mist);
  --secondary-foreground: var(--ink);
  --muted: var(--mist);
  --muted-foreground: var(--ink-soft);
  --accent: var(--lagoon-soft);
  --accent-foreground: var(--ink);
  --destructive: var(--rose);
  --need-hunger: var(--ll-need-hunger);
  --need-hunger-deep: var(--ll-need-hunger);
  --need-energy: var(--ll-need-energy);
  --need-energy-deep: var(--ll-need-energy-deep-night);
  --need-fun: var(--ll-need-fun);
  --need-fun-deep: var(--ll-need-fun);
  --need-social: var(--ll-need-social);
  --need-social-deep: var(--ll-need-social-deep-night);
  --need-hygiene: var(--ll-need-hygiene);
  --need-hygiene-deep: var(--ll-need-hygiene);
  --need-bladder: var(--ll-need-bladder);
  --need-bladder-deep: var(--ll-need-bladder-deep-night);
  --mood-very-happy: var(--ll-mood-very-happy);
  --mood-very-happy-deep: var(--ll-mood-very-happy);
  --mood-happy: var(--ll-mood-happy);
  --mood-happy-deep: var(--ll-mood-happy);
  --mood-fine: var(--ll-mood-fine);
  --mood-fine-deep: var(--ll-mood-fine);
  --mood-uneasy: var(--ll-mood-uneasy);
  --mood-uneasy-deep: var(--ll-mood-uneasy);
  --mood-miserable: var(--ll-mood-miserable);
  --mood-miserable-deep: var(--ll-mood-miserable-deep-night);

  /* semantic / font */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Twemoji Mozilla", system-ui;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* semantic / type */
  --type-display: 600 32px/36px var(--font-display);
  --type-wordmark: 600 36px/40px var(--font-display);
  --type-wordmark-tracking: -0.025em;
  --type-title-lg: 600 24px/32px var(--font-display);
  --type-title: 600 20px/28px var(--font-display);
  --type-title-sm: 600 18px/24px var(--font-display);
  --type-label-lg: 600 16px/24px var(--font-body);
  --type-body-lg: 400 16px/24px var(--font-body);
  --type-body: 400 15px/22px var(--font-body);
  --type-body-sm: 400 14px/20px var(--font-body);
  --type-label: 600 13px/18px var(--font-body);
  --type-label-sm: 600 12px/16px var(--font-body);
  --type-micro: 600 11px/16px var(--font-body);

  /* semantic / type-size */
  --type-display-size: 32px;
  --type-wordmark-size: 36px;
  --type-title-lg-size: 24px;
  --type-title-size: 20px;
  --type-title-sm-size: 18px;
  --type-label-lg-size: 16px;
  --type-body-lg-size: 16px;
  --type-body-size: 15px;
  --type-body-sm-size: 14px;
  --type-label-size: 13px;
  --type-label-sm-size: 12px;
  --type-micro-size: 11px;

  /* semantic / type-leading */
  --type-display-leading: 36px;
  --type-wordmark-leading: 40px;
  --type-title-lg-leading: 32px;
  --type-title-leading: 28px;
  --type-title-sm-leading: 24px;
  --type-label-lg-leading: 24px;
  --type-body-lg-leading: 24px;
  --type-body-leading: 22px;
  --type-body-sm-leading: 20px;
  --type-label-leading: 18px;
  --type-label-sm-leading: 16px;
  --type-micro-leading: 16px;

  /* semantic / tracking */
  --tracking-caps: 0.025em;
  --tracking-numeric: 0em;

  /* semantic / space */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --gutter-hud: 12px;
  --pad-sheet: 20px;

  /* semantic / size */
  --tap-min: 44px;
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 56px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --emoji-sm: 16px;
  --emoji-md: 20px;
  --emoji-lg: 24px;
  --emoji-xl: 28px;
  --emoji-circle-sm: 28px;
  --emoji-circle-md: 36px;
  --emoji-circle-lg: 44px;
  --emoji-tile: 58px;
  --max-w-panel: 448px;
  --max-w-hud: 672px;
  --bp-narrow: 380px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-height-compact: 700px;
  --bp-height-tall: 780px;

  /* semantic / icon-stroke */
  --icon-stroke-xs: 2.6;
  --icon-stroke-sm: 2.4;
  --icon-stroke-md: 2.2;
  --icon-stroke-lg: 2;

  /* semantic / safe-area */
  --inapp: 0px;
  --top: calc(max(env(safe-area-inset-top), 10px) + var(--inapp));
  --bottom: max(env(safe-area-inset-bottom), 10px);
  --bottom-sheet: max(env(safe-area-inset-bottom), 16px);

  /* semantic / zone */
  --zone-top-bar: 48px;
  --zone-top-row: 44px;
  --zone-top: calc(var(--top) + var(--zone-top-bar) + var(--space-2) + var(--zone-top-row));
  --zone-bottom-bar: 62px;
  --zone-bottom: calc(var(--tab-bar-bottom) + var(--zone-bottom-bar) + var(--space-3));
  --zone-world-min: clamp(150px, calc(100cqh - 509px), 330px);
  --zone-sheet-max: calc(100cqh - var(--zone-top) - var(--zone-world-min) - var(--zone-bottom));
  --zone-side: 360px;

  /* semantic / radius */
  --radius: 1rem;
  --radius-sm: 12px;
  --radius-tile: 16px;
  --radius-card: 20px;
  --radius-panel: 26px;
  --radius-sheet: var(--radius-panel);
  --radius-full: 9999px;

  /* semantic / surface */
  --surface-glass-control: #15232de6;
  --surface-glass-panel: #15232df7;
  --surface-glass-dark: #0000008c;
  --surface-toast: #15232df2;
  --border-glass: #ffffff12;
  --scrim-modal: #04090d99;
  --scrim-sheet: #04090d8c;
  --border-glass-dark: #ffffff1a;
  --surface-dark-solid: var(--ll-night-950);

  /* semantic / blur */
  --blur-glass: 16px;
  --blur-scrim: 8px;

  /* semantic / filter */
  --glass-saturate: 1.4;

  /* semantic / gradient */
  --gradient-sky: linear-gradient(180deg, var(--ll-sky-800) 0%, var(--ll-sky-850) 55%, var(--ll-night-950) 100%);
  --gradient-avatar: linear-gradient(180deg, var(--ll-sky-50) 0%, var(--ll-sky-150) 100%);

  /* semantic / shadow */
  --shadow-flat: 0 1px 2px 0 #00000040, 0 4px 14px 0 #00000033;
  --shadow-glass: inset 0 1px 0 0 #ffffff0d, 0 8px 28px 0 #00000059;
  --shadow-raised: 0 8px 28px 0 #00000073;
  --shadow-overlay: 0 20px 50px 0 #00000099;
  --shadow-lip-rest: 0 4px 0 0 var(--primary-lip), 0 10px 18px -10px #00000066;
  --shadow-lip-hover: 0 5px 0 0 var(--primary-lip), 0 14px 22px -12px #00000073;
  --shadow-lip-pressed: 0 0 0 0 var(--primary-lip), 0 2px 4px -2px #0000004c;
  --glow-gold: 0 0 14px 0 #fcd34db3;
  --glow-gold-rest: 0 0 0 0 #facc1573;
  --glow-gold-peak: 0 0 18px 4px #facc1559;
  --pulse-ring-start: 0 0 0 0 #ffc20eb3;
  --pulse-ring-end: 0 0 0 14px #ffc20e00;

  /* semantic / z */
  --z-world-ui: 10;
  --z-hud: 20;
  --z-popover: 40;
  --z-sheet: 50;
  --z-modal: 70;
  --z-toast: 90;
  --z-system: 100;

  /* semantic / duration */
  --duration-press: 120ms;
  --duration-lip-press: 60ms;
  --duration-lip-release: 180ms;
  --duration-state: 150ms;
  --duration-message: 220ms;
  --duration-enter: 300ms;
  --duration-sheet: 450ms;
  --duration-pop: 260ms;
  --duration-bubble: 350ms;
  --duration-spring: 420ms;
  --duration-glow: 1400ms;
  --duration-pulse: 2000ms;
  --duration-float: 2600ms;
  --duration-flash: 380ms;
  --duration-shake: 450ms;
  --duration-rise: 700ms;
  --duration-ring: 1600ms;
  --duration-goal: 3200ms;

  /* semantic / ease */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-sheet: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-scrim: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pulse: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-rise: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-lip: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* semantic / state */
  --state-hover: 0.08;
  --state-pressed: 0.1;
  --press-scale: 0.97;
  --lip-depth: 4px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-halo: var(--paper);
  --state-success-hold: 2000ms;
  --state-confirm-window: 3000ms;

  /* component / button */
  --button-danger-fill: var(--rose-deep);
  --button-danger-label: var(--ink-on);
  --button-special-fill: var(--gold);
  --button-special-label: var(--ll-slate-900);

  /* component / icon-button */
  --icon-button-topup-size: 28px;

  /* component / chip-row */
  --chip-row-fade: 24px;

  /* component / field */
  --field-height: 48px;

  /* component / switch */
  --switch-width: 48px;
  --switch-height: 28px;
  --switch-thumb: 22px;

  /* component / checkbox */
  --checkbox-size: 22px;
  --checkbox-radius: 6px;

  /* component / slider */
  --slider-track: 6px;
  --slider-thumb: 24px;

  /* component / swatch */
  --swatch-size: 40px;

  /* component / spinner */
  --spinner-duration: 800ms;

  /* component / ipo */
  --ipo-ink: #f5f6fb;
  --ipo-navy: #c3c9f5;
  --ipo-paper: #1b2330;
  --ipo-fill: #3b4580;
  --ipo-accent: #ff6a1f;
  --ipo-on-accent: #1d2433;

  /* component / containers-nav-game-5d */
  --sheet-handle-width: 96px;
  --sheet-handle-height: 4px;
  --sheet-handle-color: var(--border-control);
  --sheet-stop-bar: 70px;
  --sheet-stop-peek: 178px;
  --sheet-stop-full: 343px;
  --sheet-cover-max: 0.85;
  --tab-bar-height: 62px;
  --tab-height: 54px;
  --tab-bar-active: #45d08e;
  --tab-bar-inactive: #8b9aa9;
  --tab-bar-active-fill: var(--leaf-soft);
  --tab-bar-bottom: 21px;
  --tab-bar-peek-width: 30px;
  --tab-bar-peek-height: 50px;
  --tab-bar-peek-radius: 8px;
  --tab-bar-peek-rise: 4px;
  --tab-bar-peek-nudge: 3px;
  --tab-bar-peek-tilt: -11deg;
  --status-bar-height: 48px;
  --live-stats-height: 32px;
  --live-stats-dot: 6px;
  --needs-bar-height: 8px;
  --needs-bar-height-sm: 6px;
  --needs-ring-size: 44px;
  --needs-ring-stroke: 4px;
  --name-tag-height: 21px;
  --avatar-xs: 26px;
  --avatar-sm: 36px;
  --avatar-md: 40px;
  --avatar-lg: 48px;
  --badge-size: 18px;
  --badge-new-height: 16px;
  --toast-offset: 64px;
  --toast-width: 356px;
  --toast-duration: 4000ms;
  --toast-duration-info: 8000ms;
  --modal-width: 350px;
  --popover-width: 256px;
  --action-card-min-width: 150px;
  --action-card-min-height: 139px;
  --streak-day-size: 40px;
  --reward-rep-gradient: linear-gradient(135deg, #1e1b4b 0%, #3730a3 100%);
  --reward-float-distance: 150px;
  --phone-radius: 44px;
  --phone-bezel: 10px;
  --phone-wallpaper: linear-gradient(180deg, #353a9b 0%, #773fdf 40%, #eea542 100%);
  --phone-label-shadow: 0 1px 2px 0 #000000a6;
  --app-tile-size: 58px;
  --app-tile-emoji: 28px;
  --phone-frame: #111318;
  --phone-clock-size: 64px;
  --ink-positive: var(--leaf-deep);
}