/* ═════════════════════════════════════════════════════════════════════
   Uboros Design System — tokens.css
   The single source of truth for every visual decision.

   Layers:
   • :root            — foundation tokens (spacing, radius, motion, z, type)
   • [data-theme]     — theme tokens (light + dark surfaces, ink, accent)
   • [data-density]   — layout density (compact / regular / spacious)

   Tokens are consumed by components.css and by component-scoped CSS in
   the product. Never hard-code colors, spacing, or radii in components —
   always read from var(--token).
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type families ───────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;

  /* ── Type scale — semantic, density-independent base values ──────── */
  --type-display-1: 56px;
  --type-display-2: 44px;
  --type-h1:        32px;
  --type-h2:        22px;
  --type-h3:        17px;
  --type-h4:        15px;
  --type-body:      14px;
  --type-body-sm:   13px;
  --type-caption:   12px;
  --type-eyebrow:   11px;
  --type-mono-sm:   11px;

  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --track-tight:   -0.025em;
  --track-snug:    -0.015em;
  --track-normal:   0;
  --track-eyebrow:  0.02em;
  --track-mono:     0.06em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Spacing scale ───────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ── Radius scale ────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --dur-instant: 60ms;
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
  --dur-page:    420ms;

  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  /* ── Z-index scale ───────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  50;
  --z-modal:    100;
  --z-toast:    150;
  --z-tooltip:  200;

  /* ── Focus ring ──────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--sage);
}

/* ═════════════════════════════════════════════════════════════════════
   Theme — light
   ═════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Surfaces */
  --bg:              #FAFAF7;
  --bg-grid:         rgba(26, 26, 26, 0.06);
  --surface:         #FFFFFF;
  --surface-2:       #F3F2EC;
  --surface-3:       #EAE9E2;
  --surface-inverse: #1A1A1A;

  /* Ink */
  --ink-hi:      #1A1A1A;
  --ink-md:      #4C4C4A;
  --ink-lo:      #8A8A85;
  --ink-xl:      #B5B5AF;
  --ink-inverse: #FAFAF7;

  /* Rules */
  --rule:        rgba(26, 26, 26, 0.09);
  --rule-2:      rgba(26, 26, 26, 0.05);
  --rule-strong: rgba(26, 26, 26, 0.18);

  /* Sage — primary accent (the loop colour) */
  --sage:        #5E7363;
  --sage-ink:    #2E3A31;
  --sage-soft:   #E4EBE3;
  --sage-soft-2: #D5DFD4;

  /* Sand — secondary accent (governance + attention) */
  --sand:        #C8AE82;
  --sand-ink:    #6B4F22;
  --sand-soft:   #F1E6CF;

  /* Semantic — warn is a dark red (operator: "only dark red for
     errors/warnings"), kept a hair lighter/more crimson than danger so
     the two stay distinguishable when shown side by side. */
  --warn:        #A83A33;
  --warn-soft:   #F6E3DF;
  --danger:      #A23A2A;
  --danger-soft: #F7E3DE;
  --ok:          var(--sage);
  --ok-soft:     var(--sage-soft);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 1px 2px rgba(26, 26, 26, 0.03), 0 8px 30px -16px rgba(26, 26, 26, 0.10);
  --shadow-lg: 0 2px 4px rgba(26, 26, 26, 0.04), 0 30px 60px -30px rgba(26, 26, 26, 0.20);

  /* Mock-ad preview surface (inverted vs UI to keep "ad world" distinct) */
  --mock-bg:      #1A1A1A;
  --mock-ink:     #FAFAF7;
  --mock-eyebrow: var(--sand);
}

/* ═════════════════════════════════════════════════════════════════════
   Theme — dark
   ═════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:              #0F0F0D;
  --bg-grid:         rgba(242, 239, 231, 0.05);
  --surface:         #1A1A17;
  --surface-2:       #23221F;
  --surface-3:       #2D2C28;
  --surface-inverse: #FAFAF7;

  --ink-hi:      #F2EFE7;
  --ink-md:      #B4B0A6;
  --ink-lo:      #7A766D;
  --ink-xl:      #4C493F;
  --ink-inverse: #1A1A1A;

  --rule:        rgba(242, 239, 231, 0.08);
  --rule-2:      rgba(242, 239, 231, 0.04);
  --rule-strong: rgba(242, 239, 231, 0.18);

  --sage:        #8FA597;
  --sage-ink:    #DCE6DE;
  --sage-soft:   rgba(143, 165, 151, 0.15);
  --sage-soft-2: rgba(143, 165, 151, 0.25);

  --sand:        #D9BF93;
  --sand-ink:    #2E2317;
  --sand-soft:   rgba(217, 191, 147, 0.14);

  --warn:        #E0917A;
  --warn-soft:   rgba(224, 145, 122, 0.14);
  --danger:      #E0876F;
  --danger-soft: rgba(224, 135, 111, 0.12);
  --ok:          var(--sage);
  --ok-soft:     var(--sage-soft);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 30px -16px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 30px 60px -30px rgba(0, 0, 0, 0.9);

  /* Ad-mock flips to a bone surface in dark mode */
  --mock-bg:      #F2EFE7;
  --mock-ink:     #1A1A1A;
  --mock-eyebrow: #6B4F22;
}

/* ═════════════════════════════════════════════════════════════════════
   Density — compact / regular / spacious
   These override the screen-specific layout sizings. Components can
   reference them directly to get density-aware spacing.
   ═════════════════════════════════════════════════════════════════════ */
[data-density="compact"] {
  --topbar-h:        48px;
  --rail-w:          220px;
  --rail-pad-y:      14px;
  --rail-pad-x:      10px;
  --rail-item-pad-y: 6px;
  --rail-item-pad-x: 10px;
  --rail-font:       12.5px;

  --main-pad-x:        24px;
  --main-pad-y:        14px;
  --pagehead-pad-y:    16px;
  --pagehead-gap:      4px;
  --page-title-size:   28px;
  --page-sub-size:     13px;
  --page-eyebrow-size: 11px;

  --card-radius:    10px;
  --card-pad-x:     18px;
  --card-pad-y:     14px;
  --card-gap:       10px;
  --card-title-size: 16px;
  --card-sub-size:   12px;

  --field-pad-y:     8px;
  --field-pad-x:     12px;
  --field-label-w:   130px;
  --field-label-size: 12px;
  --field-val-size:   13px;

  --voice-pad:  16px;
  --voice-size: 16px;
  --swatch-h:   64px;
  --swatch-cols: 5;

  --base-font: 13px;
  --base-line: 1.45;

  /* Density-aware button heights */
  --btn-h-md: 28px;
  --btn-h-lg: 34px;
}

[data-density="regular"] {
  --topbar-h:        60px;
  --rail-w:          240px;
  --rail-pad-y:      24px;
  --rail-pad-x:      16px;
  --rail-item-pad-y: 8px;
  --rail-item-pad-x: 12px;
  --rail-font:       13px;

  --main-pad-x:        32px;
  --main-pad-y:        24px;
  --pagehead-pad-y:    24px;
  --pagehead-gap:      8px;
  --page-title-size:   42px;
  --page-sub-size:     14px;
  --page-eyebrow-size: 11.5px;

  --card-radius:     14px;
  --card-pad-x:      24px;
  --card-pad-y:      20px;
  --card-gap:        16px;
  --card-title-size: 19px;
  --card-sub-size:   12.5px;

  --field-pad-y:      12px;
  --field-pad-x:      16px;
  --field-label-w:    140px;
  --field-label-size: 12.5px;
  --field-val-size:   14px;

  --voice-pad:  22px;
  --voice-size: 19px;
  --swatch-h:   96px;
  --swatch-cols: 5;

  --base-font: 13.5px;
  --base-line: 1.5;

  --btn-h-md: 32px;
  --btn-h-lg: 40px;
}

[data-density="spacious"] {
  --topbar-h:        72px;
  --rail-w:          264px;
  --rail-pad-y:      32px;
  --rail-pad-x:      20px;
  --rail-item-pad-y: 11px;
  --rail-item-pad-x: 14px;
  --rail-font:       13.5px;

  --main-pad-x:        44px;
  --main-pad-y:        36px;
  --pagehead-pad-y:    36px;
  --pagehead-gap:      12px;
  --page-title-size:   56px;
  --page-sub-size:     15px;
  --page-eyebrow-size: 12px;

  --card-radius:     18px;
  --card-pad-x:      32px;
  --card-pad-y:      28px;
  --card-gap:        24px;
  --card-title-size: 22px;
  --card-sub-size:   13.5px;

  --field-pad-y:      18px;
  --field-pad-x:      22px;
  --field-label-w:    160px;
  --field-label-size: 13px;
  --field-val-size:   15px;

  --voice-pad:  32px;
  --voice-size: 22px;
  --swatch-h:   128px;
  --swatch-cols: 5;

  --base-font: 14.5px;
  --base-line: 1.55;

  --btn-h-md: 36px;
  --btn-h-lg: 44px;
}

/* ═════════════════════════════════════════════════════════════════════
   Semantic typography classes — reach for these in product code.
   ═════════════════════════════════════════════════════════════════════ */
.t-display-1 {
  font-family: var(--font-display);
  font-size: var(--type-display-1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}
.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--type-display-2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
}
.t-h4 {
  font-family: var(--font-body);
  font-size: var(--type-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--ink-lo);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-mono);
  color: var(--ink-lo);
  text-transform: uppercase;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  font-weight: var(--weight-regular);
  color: var(--ink-md);
}

/* v45ct: Accessibility — honour OS-level reduced-motion preference.
   When the user has "Reduce motion" turned on in their OS, suppress
   animations, transitions, and smooth scroll across the whole app.
   The 0.01ms duration (instead of 0) keeps :hover/:focus state
   transitions atomic without firing animation completion handlers.
   Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}