/* ==========================================================================
   Signal Verse AR — Design Tokens
   Single source of truth for colour, type, space, motion and elevation.
   Every value below is documented on /design-system.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand ramp ------------------------------------------------------ */
  --sv-blue-50:  #EAF4FF;
  --sv-blue-100: #D2E9FF;
  --sv-blue-200: #A5D2FF;
  --sv-blue-300: #64D2FF;
  --sv-blue-400: #3AA5FF;
  --sv-blue-500: #0A84FF;
  --sv-blue-600: #0068D6;
  --sv-blue-700: #0050A6;

  --sv-green-100: #DFF7E6;
  --sv-green-400: #4FE07A;
  --sv-green-500: #30D158;
  --sv-green-600: #23A845;

  --sv-amber-500: #FF9F0A;
  --sv-red-500:   #FF453A;
  --sv-purple-500:#BF5AF2;

  /* ---- Neutral ramp ---------------------------------------------------- */
  --sv-grey-0:   #FFFFFF;
  --sv-grey-25:  #FBFCFD;
  --sv-grey-50:  #F7F8FA;
  --sv-grey-100: #F1F3F6;
  --sv-grey-150: #ECECEC;
  --sv-grey-200: #DFE2E7;
  --sv-grey-300: #C3C8D0;
  --sv-grey-400: #9AA1AC;
  --sv-grey-500: #666666;
  --sv-grey-600: #4A4E55;
  --sv-grey-700: #2C2F34;
  --sv-grey-800: #1C1E22;
  --sv-grey-900: #111111;
  --sv-grey-950: #0A0B0D;

  /* ---- Semantic surface / text (light) --------------------------------- */
  --bg:              #F7F8FA;
  --bg-elevated:     #FFFFFF;
  --bg-sunken:       #F1F3F6;
  --bg-inverse:      #111111;

  --surface:         rgba(255, 255, 255, 0.72);
  --surface-solid:   #FFFFFF;
  --surface-hover:   rgba(255, 255, 255, 0.92);
  --surface-muted:   rgba(17, 17, 17, 0.03);
  --surface-glass:   rgba(255, 255, 255, 0.58);
  --surface-veil:    rgba(247, 248, 250, 0.72);

  --text:            #111111;
  --text-secondary:  #666666;
  --text-tertiary:   #9AA1AC;
  --text-inverse:    #FFFFFF;
  --text-on-accent:  #FFFFFF;

  --border:          #ECECEC;
  --border-strong:   #DFE2E7;
  --border-glass:    rgba(255, 255, 255, 0.68);

  --accent:          #0A84FF;
  --accent-hover:    #0068D6;
  --accent-soft:     rgba(10, 132, 255, 0.10);
  --accent-ring:     rgba(10, 132, 255, 0.30);
  --success:         #30D158;
  --success-soft:    rgba(48, 209, 88, 0.12);
  --warning:         #FF9F0A;
  --warning-soft:    rgba(255, 159, 10, 0.12);
  --danger:          #FF453A;
  --danger-soft:     rgba(255, 69, 58, 0.12);
  --cyan:            #64D2FF;
  --cyan-soft:       rgba(100, 210, 255, 0.14);

  /* Mesh / hero lighting */
  --mesh-1: rgba(10, 132, 255, 0.42);
  --mesh-2: rgba(100, 210, 255, 0.38);
  --mesh-3: rgba(48, 209, 88, 0.22);
  --mesh-4: rgba(191, 90, 242, 0.20);
  --grid-line: rgba(17, 17, 17, 0.05);
  --noise-opacity: 0.035;

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
                  "Cascadia Code", "Roboto Mono", monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-display-1: clamp(2.75rem, 1.2rem + 6.4vw, 6.5rem);   /*  44 → 104 */
  --fs-display-2: clamp(2.25rem, 1.1rem + 4.6vw, 4.75rem);  /*  36 →  76 */
  --fs-h1:        clamp(2rem,    1.2rem + 3.2vw, 3.5rem);   /*  32 →  56 */
  --fs-h2:        clamp(1.625rem,1.1rem + 2.1vw, 2.625rem); /*  26 →  42 */
  --fs-h3:        clamp(1.3125rem, 1rem + 1.1vw, 1.75rem);  /*  21 →  28 */
  --fs-h4:        clamp(1.125rem, 1rem + 0.5vw, 1.375rem);  /*  18 →  22 */
  --fs-lead:      clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  --fs-body:      1.0625rem;   /* 17 — iOS body */
  --fs-callout:   1rem;        /* 16 */
  --fs-subhead:   0.9375rem;   /* 15 */
  --fs-footnote:  0.8125rem;   /* 13 */
  --fs-caption:   0.75rem;     /* 12 */
  --fs-micro:     0.6875rem;   /* 11 */

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-display: -0.022em;
  --tracking-tight:   -0.014em;
  --tracking-base:    -0.006em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.09em;

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

  /* ---- Spacing — 8-point system ---------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 — half step */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */
  --space-13: 10rem;    /* 160 */

  --section-y: clamp(4.5rem, 3rem + 7vw, 10rem);
  --gutter:    clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --max-width: 1240px;
  --max-width-wide: 1440px;
  --max-width-text: 68ch;

  /* ---- Radius ---------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-3xl:  48px;
  --r-pill: 999px;
  --r-device: 56px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 1px rgba(17, 17, 17, 0.03);
  --shadow-2: 0 2px 8px rgba(17, 17, 17, 0.05), 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-3: 0 8px 24px rgba(17, 17, 17, 0.07), 0 2px 6px rgba(17, 17, 17, 0.04);
  --shadow-4: 0 18px 48px rgba(17, 17, 17, 0.10), 0 4px 12px rgba(17, 17, 17, 0.05);
  --shadow-5: 0 32px 80px rgba(17, 17, 17, 0.14), 0 8px 24px rgba(17, 17, 17, 0.06);
  --shadow-glow: 0 12px 40px rgba(10, 132, 255, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Blur ------------------------------------------------------------ */
  --blur-sm: 8px;
  --blur-md: 18px;
  --blur-lg: 32px;
  --blur-xl: 56px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);      /* Apple "ease-out-quint" */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot */
  --ease-soft:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasis: cubic-bezier(0.83, 0, 0.17, 1);

  --dur-instant: 90ms;
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    460ms;
  --dur-slower:  720ms;
  --dur-cinema:  1100ms;

  /* ---- Z-index ladder --------------------------------------------------- */
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-nav:       200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-cursor:    900;
  --z-splash:    1000;
}

/* ==========================================================================
   Dark theme — applied by prefers-color-scheme or [data-theme="dark"]
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:              #0A0B0D;
    --bg-elevated:     #16181C;
    --bg-sunken:       #060708;
    --bg-inverse:      #F7F8FA;

    --surface:         rgba(30, 33, 38, 0.66);
    --surface-solid:   #16181C;
    --surface-hover:   rgba(42, 46, 53, 0.82);
    --surface-muted:   rgba(255, 255, 255, 0.04);
    --surface-glass:   rgba(24, 26, 31, 0.62);
    --surface-veil:    rgba(10, 11, 13, 0.72);

    --text:            #F5F6F8;
    --text-secondary:  #9CA3AE;
    --text-tertiary:   #6B7280;
    --text-inverse:    #111111;

    --border:          rgba(255, 255, 255, 0.09);
    --border-strong:   rgba(255, 255, 255, 0.16);
    --border-glass:    rgba(255, 255, 255, 0.10);

    --accent:          #0A84FF;
    --accent-hover:    #409CFF;
    --accent-soft:     rgba(10, 132, 255, 0.18);
    --accent-ring:     rgba(10, 132, 255, 0.45);
    --success-soft:    rgba(48, 209, 88, 0.18);
    --warning-soft:    rgba(255, 159, 10, 0.18);
    --danger-soft:     rgba(255, 69, 58, 0.18);
    --cyan-soft:       rgba(100, 210, 255, 0.16);

    --mesh-1: rgba(10, 132, 255, 0.46);
    --mesh-2: rgba(100, 210, 255, 0.30);
    --mesh-3: rgba(48, 209, 88, 0.18);
    --mesh-4: rgba(191, 90, 242, 0.28);
    --grid-line: rgba(255, 255, 255, 0.05);
    --noise-opacity: 0.05;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-4: 0 18px 48px rgba(0, 0, 0, 0.55);
    --shadow-5: 0 32px 80px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 12px 48px rgba(10, 132, 255, 0.42);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:              #0A0B0D;
  --bg-elevated:     #16181C;
  --bg-sunken:       #060708;
  --bg-inverse:      #F7F8FA;

  --surface:         rgba(30, 33, 38, 0.66);
  --surface-solid:   #16181C;
  --surface-hover:   rgba(42, 46, 53, 0.82);
  --surface-muted:   rgba(255, 255, 255, 0.04);
  --surface-glass:   rgba(24, 26, 31, 0.62);
  --surface-veil:    rgba(10, 11, 13, 0.72);

  --text:            #F5F6F8;
  --text-secondary:  #9CA3AE;
  --text-tertiary:   #6B7280;
  --text-inverse:    #111111;

  --border:          rgba(255, 255, 255, 0.09);
  --border-strong:   rgba(255, 255, 255, 0.16);
  --border-glass:    rgba(255, 255, 255, 0.10);

  --accent:          #0A84FF;
  --accent-hover:    #409CFF;
  --accent-soft:     rgba(10, 132, 255, 0.18);
  --accent-ring:     rgba(10, 132, 255, 0.45);
  --success-soft:    rgba(48, 209, 88, 0.18);
  --warning-soft:    rgba(255, 159, 10, 0.18);
  --danger-soft:     rgba(255, 69, 58, 0.18);
  --cyan-soft:       rgba(100, 210, 255, 0.16);

  --mesh-1: rgba(10, 132, 255, 0.46);
  --mesh-2: rgba(100, 210, 255, 0.30);
  --mesh-3: rgba(48, 209, 88, 0.18);
  --mesh-4: rgba(191, 90, 242, 0.28);
  --grid-line: rgba(255, 255, 255, 0.05);
  --noise-opacity: 0.05;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-4: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-5: 0 32px 80px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 12px 48px rgba(10, 132, 255, 0.42);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}