/**
 * M4D Design System — Compiled Token Output
 * Source: tokens/primitives.json + semantic.json + components.json
 * Fonts: Bungee (display/serif) · Space Grotesk (sans) · JetBrains Mono (mono)
 *
 * Contrast audit (WCAG 2.1 §1.4.3 — AA = 4.5:1 normal text, 3:1 large text)
 * ✓ text-primary   #2C2C2A on white  13.99:1
 * ✓ text-secondary #5F5E5A on white   6.49:1
 * ✓ text-muted     #5F5E5A on white   6.49:1  (upgraded from report draft — gray.400 failed at 3.61:1)
 * — text-disabled  #888780           exempt  (WCAG 1.4.3: inactive components have no contrast requirement)
 * ✓ action-primary #534AB7 on white   6.93:1
 * ✓ white on       #534AB7            6.93:1
 * ✓ success        #0F6E56 on white   6.20:1
 * ✓ danger         #A32D2D on white   7.07:1
 * ✓ warning        #854F0B on white   6.73:1  (upgraded from amber.400 which failed at 3.72:1)
 * ✓ purple badge   #534AB7 on #EEEDFE 6.00:1
 * ✓ teal badge     #0F6E56 on #E1F5EE 5.46:1
 * ✓ amber badge    #854F0B on #FAEEDA 5.87:1
 * ✓ danger badge   #993C1D on #FAECE7 6.03:1
 */

/* ─── Tier 1: Primitives ────────────────────────────────────────────────── */
:root {

  /* Purple */
  --color-purple-50:  #EEEDFE;
  --color-purple-100: #CECBF6;
  --color-purple-200: #AFA9EC;
  --color-purple-400: #7F77DD;
  --color-purple-600: #534AB7;
  --color-purple-800: #3C3489;
  --color-purple-900: #26215C;

  /* Teal */
  --color-teal-50:  #E1F5EE;
  --color-teal-100: #9FE1CB;
  --color-teal-200: #5DCAA5;
  --color-teal-400: #1D9E75;
  --color-teal-600: #0F6E56;
  --color-teal-800: #085041;
  --color-teal-900: #04342C;

  /* Gray (warm) */
  --color-gray-50:  #F1EFE8;
  --color-gray-100: #D3D1C7;
  --color-gray-200: #B4B2A9;
  --color-gray-400: #888780;
  --color-gray-600: #5F5E5A;
  --color-gray-800: #444441;
  --color-gray-900: #2C2C2A;

  /* Red */
  --color-red-50:  #FAECE7;
  --color-red-200: #F2A09E;
  --color-red-400: #E24B4A;
  --color-red-600: #A32D2D;
  --color-red-900: #3D1010;

  /* Amber */
  --color-amber-50:  #FAEEDA;
  --color-amber-400: #BA7517;
  --color-amber-600: #854F0B;
  --color-amber-900: #3D2100;

  /* Green */
  --color-green-400: #639922;
  --color-green-600: #3B6D11;

  /* Base */
  --color-white: #FFFFFF;
  --color-black: #0A0A0A;
  --color-ink:   #0d0d0d;   /* deep dark surface — primary bg for dark-first pages */

  /* Highlight teal (editorial accent on dark surfaces — not interactive) */
  --color-hl-teal-subtle: #0d2e2b;
  --color-hl-teal-muted:  #0d6b62;
  --color-hl-teal-base:   #1ab5a3;
  --color-hl-teal-bright: #4dd4c6;

  /* Highlight gold (editorial accent on dark surfaces — not interactive) */
  --color-hl-gold-subtle: #2e230a;
  --color-hl-gold-muted:  #9e7820;
  --color-hl-gold-base:   #e6af2e;
  --color-hl-gold-bright: #f2cd70;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Font family */
  --font-family-sans:  'Space Grotesk', system-ui, sans-serif;
  --font-family-serif: 'Bungee', Georgia, serif;
  --font-family-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* Font size */
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 16px;
  --font-size-lg:   18px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;

  /* Font weight */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Line height */
  --font-leading-tight:   1.2;
  --font-leading-base:    1.5;
  --font-leading-relaxed: 1.7;

  /* Motion — duration (single-shot transitions) */
  --motion-duration-instant: 0ms;
  --motion-duration-fast:    150ms;  /* hover · focus · color shifts */
  --motion-duration-base:    250ms;  /* card surface / border changes */
  --motion-duration-slow:    350ms;  /* character hover / lift / scale */
  --motion-duration-slower:  600ms;  /* sparingly */
  --motion-duration-slowest: 800ms;  /* entrance animations */

  /* Motion — duration (continuous loops) */
  --motion-duration-loop-short:   8s;   /* float-gentle */
  --motion-duration-loop-medium:  10s;  /* float-drift */
  --motion-duration-loop-long:    13s;  /* float-slow / planets */
  --motion-duration-loop-orbital: 28s;  /* spin — satellites */

  /* Motion — easing curves */
  --motion-easing-linear:  linear;
  --motion-easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Tier 2: Semantic ──────────────────────────────────────────────────── */

  /* Action */
  --color-action-primary:        var(--color-purple-600);
  --color-action-primary-hover:  var(--color-purple-800);
  --color-action-primary-subtle: var(--color-purple-50);
  --color-action-on-primary:     var(--color-white);

  /* Surface */
  --color-surface-ink:     var(--color-ink);        /* dark-first page bg */
  --color-surface-ink-alt: var(--color-black);      /* alt dark section bg */
  --color-surface-base:    var(--color-white);
  --color-surface-raised:  var(--color-white);
  --color-surface-subtle:  var(--color-gray-50);
  --color-surface-overlay: var(--color-gray-900);

  /* Text */
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted:     var(--color-gray-600);
  --color-text-disabled:  var(--color-gray-400);
  --color-text-on-action: var(--color-white);
  --color-text-link:      var(--color-purple-600);

  /* Border */
  --color-border-subtle:  var(--color-gray-100);
  --color-border-default: var(--color-gray-200);
  --color-border-strong:  var(--color-gray-400);
  --color-border-focus:   var(--color-purple-400);

  /* Feedback */
  --color-feedback-success:        var(--color-teal-600);
  --color-feedback-success-subtle: var(--color-teal-50);
  --color-feedback-warning:        var(--color-amber-600);
  --color-feedback-warning-subtle: var(--color-amber-50);
  --color-feedback-danger:         var(--color-red-600);
  --color-feedback-danger-subtle:  var(--color-red-50);

  /* Semantic spacing */
  --space-component-padding-sm: var(--space-3);
  --space-component-padding-md: var(--space-4);
  --space-component-gap:        var(--space-3);
  --space-layout-section:       var(--space-12);
  --space-layout-page-x:        var(--space-8);

  /* Semantic radius */
  --radius-component: var(--radius-md);
  --radius-card:      var(--radius-lg);
  --radius-pill:      var(--radius-full);

  /* Semantic font */
  --font-body:    var(--font-size-base);
  --font-caption: var(--font-size-sm);
  --font-label:   var(--font-size-xs);
  --font-heading: var(--font-size-xl);

  /* Semantic motion — transitions (intent-named durations) */
  --motion-transition-state-change: var(--motion-duration-fast);
  --motion-transition-surface:      var(--motion-duration-base);
  --motion-transition-hover:        var(--motion-duration-slow);
  --motion-transition-entrance:     var(--motion-duration-slowest);

  /* Semantic motion — easing (intent-named curves) */
  --motion-easing-state-change: var(--motion-easing-in-out);
  --motion-easing-entrance:     var(--motion-easing-out);
  --motion-easing-character:    var(--motion-easing-in-out);
  --motion-easing-rotation:     var(--motion-easing-linear);

  /* Cosmic Series — character motion */
  --character-duration-float-gentle: var(--motion-duration-loop-short);
  --character-duration-float-drift:  var(--motion-duration-loop-medium);
  --character-duration-float-slow:   var(--motion-duration-loop-long);
  --character-duration-spin:         var(--motion-duration-loop-orbital);
  --character-duration-entrance:     var(--motion-transition-entrance);
  --character-duration-hover:        var(--motion-transition-hover);

  --character-transform-float-amplitude:     16px;
  --character-transform-float-amplitude-max: 24px;
  --character-transform-float-rotation:      2deg;
  --character-transform-hover-lift:          -6px;
  --character-transform-hover-scale:         1.05;

  /* Cosmic Series — parallax */
  --parallax-depth-character-min: 0.6;
  --parallax-depth-character-max: 0.9;
  --parallax-depth-cosmic-min:    0.2;
  --parallax-depth-cosmic-max:    0.5;
  --parallax-max-offset:          110px;

  /* ─── Tier 3: Component tokens ──────────────────────────────────────────── */

  /* Button */
  --button-bg-primary:       var(--color-action-primary);
  --button-bg-primary-hover: var(--color-action-primary-hover);
  --button-bg-ghost:         transparent;
  --button-bg-ghost-hover:   var(--color-action-primary-subtle);
  --button-text-primary:     var(--color-text-on-action);
  --button-text-ghost:       var(--color-action-primary);
  --button-radius:           var(--radius-component);
  --button-focus-ring:       var(--color-border-focus);
  --button-transition:       background var(--motion-transition-state-change) var(--motion-easing-state-change),
                             transform  var(--motion-transition-state-change) var(--motion-easing-state-change),
                             filter     var(--motion-transition-state-change) var(--motion-easing-state-change);

  /* Input */
  --input-bg:             var(--color-surface-base);
  --input-border-default: var(--color-border-default);
  --input-border-focus:   var(--color-border-focus);
  --input-border-error:   var(--color-feedback-danger);
  --input-placeholder:    var(--color-text-disabled);
  --input-radius:         var(--radius-component);
  --input-transition:     border-color var(--motion-transition-state-change) var(--motion-easing-state-change),
                          box-shadow   var(--motion-transition-state-change) var(--motion-easing-state-change);

  /* Badge */
  --badge-radius:    var(--radius-pill);
  --badge-font-size: var(--font-label);
  --badge-padding-x: var(--space-component-padding-sm);

  /* Card */
  --card-bg:         var(--color-surface-raised);
  --card-border:     var(--color-border-subtle);
  --card-radius:     var(--radius-card);
  --card-padding:    var(--space-component-padding-md);
  --card-transition: background   var(--motion-transition-surface) var(--motion-easing-state-change),
                     border-color var(--motion-transition-surface) var(--motion-easing-state-change);

  /* Icon (paired with icons.json manifest) */
  --icon-transition: color var(--motion-transition-state-change) var(--motion-easing-state-change);

  /* Character (Cosmic Series) — composed animations */
  --character-animation-float-gentle: float-gentle var(--character-duration-float-gentle) var(--motion-easing-character) infinite;
  --character-animation-float-drift:  float-drift  var(--character-duration-float-drift)  var(--motion-easing-character) infinite;
  --character-animation-float-slow:   float-slow   var(--character-duration-float-slow)   var(--motion-easing-character) infinite;
  --character-animation-spin:         spin         var(--character-duration-spin)         var(--motion-easing-rotation)  infinite;
  --character-transition-hover:       transform var(--character-duration-hover) var(--motion-easing-state-change),
                                      filter    var(--character-duration-hover) var(--motion-easing-state-change);

}

/* ─── Reduced-motion override ──────────────────────────────────────────────
 * Honors `prefers-reduced-motion`. Single-shot transitions still run (UX
 * affordance is preserved) but at instant duration. Continuous loops stop.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast:    var(--motion-duration-instant);
    --motion-duration-base:    var(--motion-duration-instant);
    --motion-duration-slow:    var(--motion-duration-instant);
    --motion-duration-slower:  var(--motion-duration-instant);
    --motion-duration-slowest: var(--motion-duration-instant);

    --character-animation-float-gentle: none;
    --character-animation-float-drift:  none;
    --character-animation-float-slow:   none;
    --character-animation-spin:         none;
  }
}

/* ─── Cosmic Series keyframes (consumed via --character-animation-*) ─────── */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0) rotate(calc(-1 * var(--character-transform-float-rotation) / 2)); }
  50%      { transform: translateY(calc(-1 * var(--character-transform-float-amplitude))) rotate(calc(var(--character-transform-float-rotation) / 2)); }
}

@keyframes float-drift {
  0%   { transform: translate(0, 0) rotate(calc(-1 * var(--character-transform-float-rotation))); }
  25%  { transform: translate(8px, -10px) rotate(0deg); }
  50%  { transform: translate(0, calc(-1 * var(--character-transform-float-amplitude-max))) rotate(var(--character-transform-float-rotation)); }
  75%  { transform: translate(-8px, -10px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(calc(-1 * var(--character-transform-float-rotation))); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Dark mode (Tier 2 overrides only — component tokens update via var() chains) */
[data-theme="dark"] {

  --color-action-primary:        var(--color-purple-400);
  --color-action-primary-hover:  var(--color-purple-200);
  --color-action-primary-subtle: var(--color-purple-900);

  --color-surface-base:    var(--color-gray-900);
  --color-surface-raised:  var(--color-gray-800);
  --color-surface-subtle:  var(--color-gray-800);
  --color-surface-overlay: var(--color-gray-900);

  --color-text-primary:   var(--color-gray-50);
  --color-text-secondary: var(--color-gray-200);
  --color-text-muted:     var(--color-gray-400);
  --color-text-link:      var(--color-purple-200);

  --color-border-subtle:  var(--color-gray-800);
  --color-border-default: var(--color-gray-600);
  --color-border-focus:   var(--color-purple-200);

  --color-feedback-success:        var(--color-teal-200);
  --color-feedback-success-subtle: var(--color-teal-900);
  --color-feedback-warning:        var(--color-amber-400);
  --color-feedback-warning-subtle: var(--color-amber-900);
  --color-feedback-danger:         var(--color-red-200);
  --color-feedback-danger-subtle:  var(--color-red-900);

}