/* Phantom Auto · design tokens
   The one source of truth for every page. Pages never use raw hex, px or timing:
   they read these variables. Change a value here and the whole site follows. */
:root {
  color-scheme: dark;

  /* Neutrals (ink) */
  --ink-0: #0A0C12;            /* page */
  --ink-1: #10131B;            /* surface */
  --ink-2: #161A25;            /* raised */
  --ink-3: #1D2231;            /* hover / pressed surface */
  --line: rgba(214, 220, 255, 0.08);
  --line-strong: rgba(214, 220, 255, 0.16);
  --nav-bg: rgba(10, 12, 18, 0.72);   /* ink-0, translucent under the blur */

  --text-1: #ECEEF5;           /* 16.9:1 on ink-0 */
  --text-2: #A9AFC2;           /*  8.9:1 */
  --text-3: #8189A0;           /*  5.6:1, 4.98:1 on ink-2 */

  /* Brand: one primary */
  --primary: #6E4DF5;          /* white text 5.19:1 */
  --primary-hover: #5E3DE6;
  --primary-press: #5232D6;
  --primary-text: #A08BFF;     /* violet text on ink, 7.1:1 */
  --primary-soft: rgba(124, 92, 255, 0.12);
  --primary-line: rgba(160, 139, 255, 0.35);
  --primary-ring: rgba(160, 139, 255, 0.6);
  --on-primary: #FFFFFF;

  /* Semantic: market state only, never decoration */
  --pos: #2BD99B;              /* profit / win  10.7:1 */
  --pos-soft: rgba(43, 217, 155, 0.12);
  --neg: #FF6B81;              /* loss           7.1:1 */
  --neg-soft: rgba(255, 107, 129, 0.12);
  --warn: #F5B544;             /* caution        10.8:1 */
  --warn-soft: rgba(245, 181, 68, 0.12);
  --on-pos: #062118;

  /* Type */
  --font-sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-2xs: 0.75rem;           /* 12 */
  --fs-xs: 0.8125rem;          /* 13 */
  --fs-sm: 0.875rem;           /* 14 */
  --fs-base: 1rem;             /* 16 */
  --fs-md: 1.125rem;           /* 18 */
  --fs-lg: 1.375rem;           /* 22 */
  --fs-xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-2xl: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  --fs-display: clamp(2.5rem, 1.3rem + 4.4vw, 4.75rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --track-label: 0.08em;
  --track-tight: -0.02em;

  /* Space: 4px rhythm, big jumps at section level */
  --s-half: 0.125rem; /* 2 */
  --s-nudge: 0.1875rem; /* 3: optical nudge for icons beside text */
  --s-1: 0.25rem;   /* 4 */
  --s-2: 0.5rem;    /* 8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
  --s-9: 6rem;      /* 96 */
  --s-10: 8rem;     /* 128 */

  --section-y: var(--s-8);
  --gutter: var(--s-4);
  --wrap: 75rem;    /* 1200 */
  --measure: 62ch;
  --measure-display: 18ch;

  /* Shape */
  --r-xs: 0.375rem;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-pill: 999px;
  --hair: 1px;

  /* Elevation: rare */
  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 80px -30px rgba(0, 0, 0, 0.75);
  --shadow-focus: 0 0 0 3px var(--primary-ring);

  /* Motion */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 700ms;
  --dur-tick: 1s;              /* the hero timer ring: one step per second */
  --dur-spin: 800ms;           /* busy spinner, one turn */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);

  /* Sizes */
  --tap: 2.75rem;              /* 44px minimum target */
  --nav-h: 4rem;
  --blur-nav: 0.875rem;
  --icon: 1.25rem;
  --icon-sm: 1rem;
  --thumb: 1.375rem;           /* range thumb */
  --thumb-sm: 0.875rem;        /* range thumb (Firefox, border drawn outside) */
  --track: 0.375rem;           /* range track height */
}

@media (min-width: 48rem) {
  :root { --gutter: var(--s-5); --section-y: var(--s-9); }
}
@media (min-width: 64rem) {
  :root { --gutter: var(--s-6); --section-y: var(--s-9); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}