/**
 * Sugoi Design System — Tier 2: Semantic Tokens
 *
 * What each value MEANS. Primitives reference these — never raw tokens (Tier 1).
 * When the brand evolves, change Tier 1 values; semantic tokens reroute and
 * primitives update automatically.
 *
 * Naming: --ds-{role}-{specifier}
 *
 * Depends on: tokens/raw.css (must load first).
 */

:root {
  /* ─── Color: brand roles (rest values, used as references) ──── */
  --ds-color-brand-primary: var(--ds-raw-purple-500);
  --ds-color-brand-secondary: var(--ds-raw-magenta-500);
  --ds-color-brand-action: var(--ds-raw-red-500);
  --ds-color-brand-warm: var(--ds-raw-orange-500);
  --ds-color-brand-highlight: var(--ds-raw-yellow-500);
  --ds-color-brand-highlight-soft: var(--ds-raw-yellow-light-500);

  /* ─── Color: paired state tokens (Carbon-style) ──────────────
     For interactive primitives. Recipe per design-language.md §5:
     same-family step shift on the OKLCH ladder — rest=500, hover=600,
     pressed=700, subtle bg=100/200. Cross-family hover (e.g.
     action→warm) is forbidden. */

  /* Action role (red) — primary CTAs */
  --ds-color-bg-action:           var(--ds-raw-red-500);
  --ds-color-bg-action-hover:     var(--ds-raw-red-600);
  --ds-color-bg-action-pressed:   var(--ds-raw-red-700);
  --ds-color-bg-action-subtle:    var(--ds-raw-red-100);
  --ds-color-fg-on-action:        var(--ds-raw-white);

  /* Brand-primary role (purple) — secondary CTAs, eyebrows, links */
  --ds-color-bg-brand-primary:           var(--ds-raw-purple-500);
  --ds-color-bg-brand-primary-hover:     var(--ds-raw-purple-600);
  --ds-color-bg-brand-primary-pressed:   var(--ds-raw-purple-700);
  --ds-color-bg-brand-primary-subtle:    var(--ds-raw-purple-100);
  --ds-color-fg-on-brand-primary:        var(--ds-raw-white);

  /* Subtle/ghost backgrounds — neutral */
  --ds-color-bg-subtle:           var(--ds-raw-gray-100);
  --ds-color-bg-subtle-hover:     var(--ds-raw-gray-200);
  --ds-color-bg-subtle-pressed:   var(--ds-raw-gray-300);

  /* Disabled — neutral colour pair, never opacity (design-language.md §2) */
  --ds-color-bg-disabled:         var(--ds-raw-gray-200);
  --ds-color-fg-disabled:         var(--ds-raw-gray-600);

  /* ─── Color: surface ─────────────────────────────────────────── */
  --ds-color-surface-base: var(--ds-raw-off-white);
  --ds-color-surface-raised: var(--ds-raw-white);
  --ds-color-surface-sunken: var(--ds-raw-gray-100);
  --ds-color-surface-inverse: var(--ds-raw-off-black);

  /* ─── Color: text ────────────────────────────────────────────── */
  --ds-color-text-primary: var(--ds-raw-off-black);
  --ds-color-text-secondary: var(--ds-raw-gray-700);
  --ds-color-text-muted: var(--ds-raw-gray-500);
  --ds-color-text-inverse: var(--ds-raw-off-white);
  --ds-color-text-inverse-secondary: #D1D1D3;     /* oklch(86% 0.003 285) — descender on inverse */
  --ds-color-text-inverse-muted:     #9E9EA1;     /* oklch(70% 0.005 285) — meta on inverse */
  --ds-color-text-heading: var(--ds-raw-purple-500);
  --ds-color-text-action: var(--ds-raw-red-500);
  --ds-color-text-link: var(--ds-raw-purple-500);

  /* ─── Color: border ──────────────────────────────────────────── */
  --ds-color-border-subtle: var(--ds-raw-gray-300);
  --ds-color-border-default: var(--ds-raw-gray-500);
  --ds-color-border-strong: var(--ds-raw-gray-700);
  --ds-color-border-brand: var(--ds-raw-purple-500);
  --ds-color-border-inverse-subtle: #3A3A3F;      /* oklch(35% 0.008 285) — replaces rgba(255,255,255,0.2) on inverse */

  /* ─── Color: focus ───────────────────────────────────────────── */
  --ds-color-focus-ring: var(--ds-raw-purple-500);

  /* ─── Spacing: semantic roles ─────────────────────────────────
     Map purpose to scale. Primitives use these, never raw spacing. */
  --ds-space-3xs: var(--ds-raw-space-1);    /* 4px  — fine details */
  --ds-space-2xs: var(--ds-raw-space-2);    /* 8px  — within an element */
  --ds-space-xs:  var(--ds-raw-space-3);    /* 12px — tight spacing */
  --ds-space-sm:  var(--ds-raw-space-4);    /* 16px — between related items */
  --ds-space-md:  var(--ds-raw-space-6);    /* 24px — between groups */
  --ds-space-lg:  var(--ds-raw-space-8);    /* 32px — section breathing */
  --ds-space-xl:  var(--ds-raw-space-12);   /* 48px — major sections */
  --ds-space-2xl: var(--ds-raw-space-16);   /* 64px — page-level rhythm */
  --ds-space-3xl: var(--ds-raw-space-24);   /* 96px — dramatic separation */

  /* ─── Type: family roles ─────────────────────────────────────── */
  --ds-font-display: var(--ds-raw-font-display);
  --ds-font-body: var(--ds-raw-font-body);

  /* ─── Type: size roles ───────────────────────────────────────── */
  --ds-text-display-xl: var(--ds-raw-text-6xl);   /* 64px — hero impact */
  --ds-text-display-lg: var(--ds-raw-text-5xl);   /* 48px — H1 */
  --ds-text-display-md: var(--ds-raw-text-4xl);   /* 36px — H2 */
  --ds-text-display-sm: var(--ds-raw-text-3xl);   /* 32px — H2 small */

  --ds-text-heading-lg: var(--ds-raw-text-2xl);   /* 24px — H3 */
  --ds-text-heading-md: var(--ds-raw-text-xl);    /* 20px — H4 */
  --ds-text-heading-sm: var(--ds-raw-text-lg);    /* 18px — H5 */
  --ds-text-heading-xs: var(--ds-raw-text-base);  /* 16px — H6 / label */

  --ds-text-body-lg: var(--ds-raw-text-lg);       /* 18px — emphasis body */
  --ds-text-body-md: var(--ds-raw-text-base);     /* 16px — default body */
  --ds-text-body-sm: var(--ds-raw-text-sm);       /* 14px — small body */
  --ds-text-caption: var(--ds-raw-text-xs);       /* 12px — caption */

  /* ─── Type: weight roles ─────────────────────────────────────── */
  --ds-weight-display: var(--ds-raw-weight-bold);     /* VAG Rounded Bold */
  --ds-weight-display-emphasis: var(--ds-raw-weight-black);
  --ds-weight-heading: var(--ds-raw-weight-semibold); /* Spline Sans 600 */
  --ds-weight-body: var(--ds-raw-weight-regular);     /* Spline Sans 400 */
  --ds-weight-emphasis: var(--ds-raw-weight-medium);
  --ds-weight-strong: var(--ds-raw-weight-bold);

  /* ─── Type: line height roles ─────────────────────────────────
     Inverse-proportional — display tightens, body opens.
     See design-language.md §4. */
  --ds-leading-display: var(--ds-raw-leading-tight);    /* 1.1   — display sizes */
  --ds-leading-heading: var(--ds-raw-leading-snug);     /* 1.25  — heading sizes */
  --ds-leading-body: var(--ds-raw-leading-relaxed);     /* 1.6   — body, captions */
  --ds-leading-loose: var(--ds-raw-leading-loose);      /* 1.75  — long-form prose */

  /* ─── Type: tracking roles ───────────────────────────────────
     Negative on display, neutral on body, positive on overlines.
     See design-language.md §4. */
  --ds-tracking-display:  -0.02em;
  --ds-tracking-heading:  -0.01em;
  --ds-tracking-body:     0;
  --ds-tracking-overline: 0.06em;

  /* ─── Type: measure (line-length cap for prose) ─────────────── */
  --ds-measure-body: 65ch;

  /* ─── Radius roles ───────────────────────────────────────────── */
  --ds-radius-button: var(--ds-raw-radius-md);
  --ds-radius-card: var(--ds-raw-radius-lg);
  --ds-radius-pill: var(--ds-raw-radius-full);
  --ds-radius-modal: var(--ds-raw-radius-xl);
  --ds-radius-image: var(--ds-raw-radius-md);

  /* ─── Shadow roles ───────────────────────────────────────────── */
  --ds-shadow-subtle: var(--ds-raw-shadow-sm);
  --ds-shadow-card: var(--ds-raw-shadow-md);
  --ds-shadow-overlay: var(--ds-raw-shadow-lg);
  --ds-shadow-modal: var(--ds-raw-shadow-xl);

  /* ─── Motion roles ───────────────────────────────────────────── */
  --ds-duration-instant: var(--ds-raw-duration-fast);
  --ds-duration-default: var(--ds-raw-duration-normal);
  --ds-duration-emphasis: var(--ds-raw-duration-slow);
  --ds-ease-default: var(--ds-raw-ease-out);
  --ds-ease-emphasis: var(--ds-raw-ease-in-out);

  /* ─── Gradient roles ─────────────────────────────────────────── */
  --ds-gradient-hero: var(--ds-raw-gradient-primary);
  --ds-gradient-cta: var(--ds-raw-gradient-warm);
  --ds-gradient-highlight: var(--ds-raw-gradient-yellow);

  /* ─── Focus ring composition ─────────────────────────────────── */
  --ds-focus-ring: var(--ds-raw-focus-ring-width) solid var(--ds-color-focus-ring);
  --ds-focus-ring-offset: var(--ds-raw-focus-ring-offset);

  /* ─── Content width roles ───────────────────────────────────── */
  --ds-content-narrow: var(--ds-raw-content-narrow);
  --ds-content-default: var(--ds-raw-content-default);
  --ds-content-wide: var(--ds-raw-content-wide);
  --ds-content-prose-max: var(--ds-raw-content-prose-max);
}

/**
 * @font-face declarations for VAG Rounded + Spline Sans.
 * Font files are at ../assets/fonts/ relative to this file's runtime location.
 * The bench build copies fonts adjacent to the output HTML; consumers do the same.
 */
@font-face {
  font-family: 'VAG Rounded';
  src: url('../assets/fonts/VAGRounded-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'VAG Rounded';
  src: url('../assets/fonts/VAGRounded-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'VAG Rounded';
  src: url('../assets/fonts/VAGRounded-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans';
  src: url('../assets/fonts/SplineSans-Variable.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-display: swap;
}

/**
 * Site-wide typographic features.
 * Kerning, standard ligatures, contextual alternates on by default.
 * Optical sizing adapts variable fonts (Spline Sans's wght axis here)
 * to their actual rendered size.
 * See design-language.md §4.
 */
:root {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
}

/**
 * .ds-tabular — utility for tabular figures.
 * Apply on prices, stat-card values, table numeric columns, timers,
 * running times, dates with fixed-width segments. Leave proportional
 * as default for prose. See design-language.md §4.
 */
.ds-tabular { font-variant-numeric: tabular-nums; }

/**
 * Reduced motion override.
 * Frontend craft rule: respect prefers-reduced-motion universally.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-instant: 0ms;
    --ds-duration-default: 0ms;
    --ds-duration-emphasis: 0ms;
  }
}