/* =========================================================================
   DESIGN TOKENS  (SHELL area — see ARCHITECTURE.md)
   Always-dark. Every value an area agent needs lives here; views must not
   hard-code colours, radii, durations or easing curves that exist below.
   ========================================================================= */
:root {
  color-scheme: dark;

  /* ---------- neutrals (warm charcoal, slight violet cast) ---------- */
  --bg-0: #0e0e10;            /* deepest: behind sheets, inside wells   */
  --bg: #151517;              /* app background                         */
  --surface-1: #1b1b1e;       /* cards                                  */
  --surface-2: #222226;       /* raised cards, inputs on cards          */
  --surface-3: #2b2b30;       /* chips, pressed surfaces                */
  --surface-4: #35353b;       /* hover / selected neutral               */

  --line: rgba(255, 255, 255, 0.06);        /* hairline borders        */
  --line-strong: rgba(255, 255, 255, 0.1);
  --line-top: rgba(255, 255, 255, 0.11);    /* lighter top edge        */
  --line-inverse: rgba(0, 0, 0, 0.35);

  --text: #f3f2f7;
  --text-2: #a7a6b2;          /* secondary copy                         */
  --text-3: #6d6c78;          /* captions, disabled                     */
  --text-on-accent: #ffffff;

  /* ---------- brand / accents (use deliberately, not everywhere) ---------- */
  --violet-300: #c3b5ff;
  --violet-400: #a08bff;
  --violet-500: #8468f6;      /* primary                                 */
  --violet-600: #6d50e8;
  --violet-700: #5639cc;
  --violet-900: #241a4d;
  --primary: var(--violet-500);
  --primary-hi: var(--violet-400);
  --primary-lo: var(--violet-600);
  --primary-tint: rgba(132, 104, 246, 0.14);

  --gold-300: #ffe08a;
  --gold-400: #ffcb47;        /* GRAM coin                               */
  --gold-500: #f5a623;
  --gold-700: #9a5b07;

  --green-400: #4fe39a;
  --green-500: #22c578;       /* wins, cash-out, connected               */
  --green-700: #0f6b41;
  --green-tint: rgba(34, 197, 120, 0.14);

  --red-400: #ff6b78;
  --red-500: #ff4757;         /* crash, errors                           */
  --red-700: #8f1d29;
  --red-tint: rgba(255, 71, 87, 0.14);

  --blue-400: #4cb4ff;
  --blue-500: #1d8fff;        /* TON / info                              */
  --blue-600: #1670e0;
  --blue-tint: rgba(29, 143, 255, 0.14);

  --orange-500: #ff8a1f;      /* "hot" tags                              */

  /* ---------- typography ---------- */
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;              /* body                                    */
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-display: 48px;
  --fs-hero: 60px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.45;

  --tracking-display: -0.02em;
  --tracking-caps: 0.08em;

  /* ---------- spacing (4px grid) ---------- */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --gutter: 16px;             /* page side padding                       */

  /* ---------- radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- elevation ---------- */
  --hl-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);            /* inner top highlight */
  --hl-top-strong: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.28);
  --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-primary: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 -2px 0 rgba(0, 0, 0, 0.18) inset,
    0 6px 18px -6px rgba(109, 80, 232, 0.65), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-green: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 0 rgba(0, 0, 0, 0.15) inset,
    0 6px 18px -6px rgba(34, 197, 120, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);

  /* ---------- motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 120ms;
  --dur-fast: 200ms;
  --dur-ui: 280ms;
  --dur-slow: 400ms;
  --dur-hero: 560ms;
  --stagger-step: 35ms;

  /* ---------- layout ---------- */
  --app-max: 520px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --tg-top: calc(var(--safe-top) + var(--tg-content-safe-area-inset-top, 0px));
  --topbar-h: 72px;
  --tabbar-h: 68px;
  --view-top: calc(var(--tg-top) + var(--topbar-h));          /* padding-top for views WITH topbar */
  --view-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-6)); /* clearance over tab bar */

  /* ---------- z-index ---------- */
  --z-base: 1;
  --z-sticky: 10;
  --z-topbar: 20;
  --z-tabbar: 30;
  --z-sheet: 60;
  --z-toast: 80;
  --z-debug: 100;
}