/*
 * KKI Design System -- Canonical 3-layer tokens
 *
 * One source of truth for all design tokens, organized as:
 *   1. PRIMITIVES  -- raw values (hex colors, px spacing, font names)
 *   2. SEMANTIC    -- intent-named tokens that reference primitives
 *   3. COMPONENTS  -- per-component tokens that reference semantic + primitives
 *   4. LEGACY BRIDGE -- maps the legacy --kki-* namespace (used by ~30
 *      component stylesheets) onto the primitives so existing code keeps
 *      working unchanged.
 *
 * Spec: openspec/specs/design-tokens/spec.md
 *
 * History: tokens-v2.css (auto-generated from tokens.json) and tokens.css
 *          (hand-maintained legacy) were merged into this single file as
 *          part of the theme refactor. Some hand-curated tokens from the
 *          old tokens.css (card patterns, glows, content widths, eyebrow
 *          spacing) live in the LEGACY BRIDGE section.
 */

/* === PRIMITIVES === */
:root {
  --primitive-color-navy-600: #243046;
  --primitive-color-navy-700: #1a2230;
  --primitive-color-navy-800: #131a24;
  --primitive-color-navy-900: #0b1420;
  --primitive-color-navy-950: #0b1017;
  --primitive-color-navy-deep: #07111d;
  --primitive-color-cream-off: #fdfcf8;
  --primitive-color-cream-soft: #fff7e8;
  --primitive-color-cream-warm: #f7f0df;
  --primitive-color-cream-page: #f0eee9;
  --primitive-color-cream-deep: #ede6d2;
  --primitive-color-gold-100: #fff7e8;
  --primitive-color-gold-300: #d8bd76;
  --primitive-color-gold-500: #b8a97d;
  --primitive-color-gold-700: #8e8266;
  --primitive-color-gold-900: #6e5e35;
  --primitive-color-status-ok: #7eb88a;
  --primitive-color-status-ok-deep: #3d6b4a;
  --primitive-color-status-warn: #eb9788;
  --primitive-color-status-warn-deep: #a04030;
  --primitive-color-neutral-white: #ffffff;
  --primitive-color-neutral-black: #000000;
  --primitive-spacing-0: 0;
  --primitive-spacing-1: 4px;
  --primitive-spacing-2: 8px;
  --primitive-spacing-3: 12px;
  --primitive-spacing-4: 16px;
  --primitive-spacing-6: 24px;
  --primitive-spacing-8: 32px;
  --primitive-spacing-12: 48px;
  --primitive-spacing-14: 56px;
  --primitive-spacing-16: 64px;
  --primitive-spacing-22: 88px;
  --primitive-spacing-30: 120px;
  --primitive-fontFamily-serif: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
  --primitive-fontFamily-sans: 'Poppins', 'IBM Plex Sans Thai', Sarabun, system-ui, sans-serif;
  --primitive-fontFamily-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --primitive-fontSize-eyebrow: 0.75rem;
  --primitive-fontSize-body-sm: 0.875rem;
  --primitive-fontSize-body: 1rem;
  --primitive-fontSize-body-lg: 1.125rem;
  --primitive-fontSize-h3: 1.5rem;
  --primitive-fontSize-h2: 2.25rem;
  --primitive-fontSize-h1: 3rem;
  --primitive-fontSize-display: 4.5rem;
  --primitive-letterSpacing-eyebrow: 0.18em;
  --primitive-letterSpacing-h2: -0.012em;
  --primitive-letterSpacing-h1: -0.015em;
  --primitive-lineHeight-tight: 1.1;
  --primitive-lineHeight-h2: 1.2;
  --primitive-lineHeight-body: 1.6;
  --primitive-lineHeight-loose: 1.7;
  --primitive-radius-none: 0;
  --primitive-radius-card: 6px;
  --primitive-radius-icon: 8px;
  --primitive-radius-lg: 12px;
  --primitive-radius-xl: 16px;
  --primitive-radius-pill: 999px;
  --primitive-shadow-card: 0 18px 38px rgba(0, 0, 0, 0.30);
  --primitive-shadow-card-hover: 0 26px 48px rgba(0, 0, 0, 0.40);
  --primitive-shadow-hero: 0 24px 60px rgba(0, 0, 0, 0.50);
  --primitive-shadow-pill: 0 4px 12px rgba(0, 0, 0, 0.32);
  --primitive-duration-fast: 150ms;
  --primitive-duration-normal: 220ms;
  --primitive-duration-slow: 400ms;
}

/* === SEMANTIC === */
:root {
  --color-background: #07111d;
  --color-background-page: #f0eee9;
  --color-surface: #131a24;
  --color-surface-raised: #1a2230;
  --color-foreground: #fff7e8;
  --color-foreground-muted: #f7f0df;
  --color-primary: #d8bd76;
  --color-primary-hover: #b8a97d;
  --color-primary-foreground: #07111d;
  --color-accent: #fff7e8;
  --color-border: #8e8266;
  --color-border-strong: #b8a97d;
  --color-success: #7eb88a;
  --color-warning: #eb9788;
  --spacing-component: 16px;
  --spacing-component-lg: 24px;
  --spacing-section: 88px;
  --spacing-section-mobile: 48px;
  --typography-eyebrow: 'Poppins', 'IBM Plex Sans Thai', Sarabun, system-ui, sans-serif;
  --typography-heading: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
  --typography-body: 'Poppins', 'IBM Plex Sans Thai', Sarabun, system-ui, sans-serif;
}

/* === COMPONENTS === */
:root {
  --hero-bg: #07111d;
  --hero-title-font: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
  --hero-title-size: 3rem;
  --hero-title-color: #fff7e8;
  --card-bg: linear-gradient(180deg, rgba(22,31,44,0.98), rgba(9,16,26,0.96));
  --card-bg-hover: linear-gradient(180deg, rgba(28,38,52,0.98), rgba(15,22,32,0.96));
  --card-border: 1px solid rgba(216,189,118,0.34);
  --card-border-hover: 1px solid rgba(216,189,118,0.62);
  --card-shadow: 0 18px 38px rgba(0, 0, 0, 0.30);
  --card-shadow-hover: 0 26px 48px rgba(0, 0, 0, 0.40);
  --card-radius: 6px;
  --fact-card-bg: rgba(7, 17, 29, 0.55);
  --fact-card-border: 1px solid rgba(216, 189, 118, 0.16);
  --fact-card-border-hover: 1px solid rgba(216, 189, 118, 0.42);
  --fact-card-label-color: #d8bd76;
  --fact-card-value-color: #fff7e8;
  --fact-card-value-font: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
  --pill-bg: linear-gradient(180deg, #d8bd76 0%, #b8a47a 100%);
  --pill-fg: #07111d;
  --pill-radius: 999px;
  --pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
  --cta-button-bg: #d8bd76;
  --cta-button-bg-hover: #b8a97d;
  --cta-button-fg: #07111d;
  --cta-button-padding-x: 32px;
  --cta-button-padding-y: 16px;
  --cta-button-radius: 999px;
  --cta-button-font-family: 'Poppins', 'IBM Plex Sans Thai', Sarabun, system-ui, sans-serif;
  --cta-button-letter-spacing: 0.18em;
}

/* === LEGACY BRIDGE === */
/*
 * Maps the legacy --kki-* variable namespace (used by ~30 component
 * stylesheets) onto the primitive layer above. Existing code keeps
 * working unchanged; new code can use either prefix.
 *
 * Some --kki-* tokens have no equivalent primitive yet (card patterns,
 * glows, content widths, eyebrow letter-spacing). Those are kept here
 * as canonical values until they migrate into tokens.json.
 */
:root {
    /* Navy aliases */
    --kki-navy-deep:   var(--primitive-color-navy-deep);
    --kki-navy:        var(--primitive-color-navy-950);
    --kki-navy-mid:    var(--primitive-color-navy-800);
    --kki-navy-rich:   var(--primitive-color-navy-700);
    --kki-navy-cta:    var(--primitive-color-navy-600);

    /* Cream aliases */
    --kki-cream:       var(--primitive-color-cream-soft);
    --kki-cream-soft:  rgba(247, 240, 223, 0.86);
    --kki-cream-mute:  rgba(240, 238, 233, 0.70);
    --kki-cream-bg:    var(--primitive-color-cream-page);
    --kki-cream-deep:  var(--primitive-color-cream-deep);
    --kki-off-white:   var(--primitive-color-cream-off);

    /* Gold aliases */
    --kki-gold:            var(--primitive-color-gold-300);
    --kki-gold-bright:     var(--primitive-color-gold-500);
    --kki-gold-deep:       var(--primitive-color-gold-900);
    --kki-gold-darker:     var(--primitive-color-gold-700);
    --kki-gold-line:       rgba(216, 189, 118, 0.20);
    --kki-gold-line-strong: rgba(216, 189, 118, 0.45);
    --kki-gold-tint:       rgba(216, 189, 118, 0.08);
    --kki-gold-tint-2:     rgba(216, 189, 118, 0.16);
    --kki-gold-tint-3:    rgba(216, 189, 118, 0.34);

    /* Card patterns (no primitive equivalent yet) */
    --kki-card-bg:           linear-gradient(180deg, rgba(22, 31, 44, 0.98), rgba(9, 16, 26, 0.96));
    --kki-card-bg-hover:     linear-gradient(180deg, rgba(28, 38, 52, 0.98), rgba(15, 22, 32, 0.96));
    --kki-card-border:       1px solid rgba(216, 189, 118, 0.34);
    --kki-card-border-hover: 1px solid rgba(216, 189, 118, 0.62);
    --kki-card-shadow:       0 18px 38px rgba(0, 0, 0, 0.30);
    --kki-card-shadow-hover: 0 26px 48px rgba(0, 0, 0, 0.40);

    /* Glow patterns (no primitive equivalent yet) */
    --kki-glow-gold:   radial-gradient(circle at 14% 0%, rgba(216, 189, 118, 0.10), transparent 32%);
    --kki-glow-gold-r: radial-gradient(circle at 86% 0%, rgba(216, 189, 118, 0.10), transparent 32%);
    --kki-glow-blue:   radial-gradient(circle at 78% 28%, rgba(148, 180, 193, 0.10), transparent 34%);

    /* Status aliases */
    --kki-status-good:      var(--primitive-color-status-ok);
    --kki-status-bad:       var(--primitive-color-status-warn);
    --kki-status-good-deep: var(--primitive-color-status-ok-deep);
    --kki-status-bad-deep:  var(--primitive-color-status-warn-deep);

    /* Spacing aliases */
    --kki-pad-section:        var(--spacing-section);
    --kki-pad-section-sm:     56px;
    --kki-pad-section-mobile: var(--spacing-section-mobile);
    --kki-gap-card:           var(--primitive-spacing-6);
    --kki-gap-tight:          var(--primitive-spacing-4);

    /* Typography aliases */
    --kki-serif:          var(--typography-heading);
    --kki-sans:           var(--typography-body);
    --kki-eyebrow-letter: var(--primitive-letterSpacing-eyebrow);
    --kki-eyebrow-size:   var(--primitive-fontSize-eyebrow);
    --kki-h2-letter:      var(--primitive-letterSpacing-h2);
    --kki-h2-line:        var(--primitive-lineHeight-h2);
    --kki-body-line:      var(--primitive-lineHeight-loose);

    /* Radii aliases */
    --kki-radius-card:    var(--primitive-radius-card);
    --kki-radius-pill:    var(--primitive-radius-pill);
    --kki-radius-icon:    var(--primitive-radius-icon);
    --kki-radius-icon-lg: var(--primitive-radius-lg);

    /* Layout (no primitive equivalent yet) */
    --kki-content-max:    1180px;
    --kki-content-narrow: 720px;
    --kki-content-text:   60ch;
}