/* ============================================================
   THEKY DESIGN TOKENS — single source of truth
   Synced copy lives in theky-landing/tokens.css (keep identical).
   Spec: theky-backend/DESIGN-SYSTEM.md
   ============================================================ */

:root {
  /* ── Brand: Terracotta (primary — CTAs, brand moments) ── */
  --tk-terra-50:  #FBF1EE;
  --tk-terra-100: #F4DCD5;
  --tk-terra-200: #EAC0B3;
  --tk-terra-300: #DE9E8A;
  --tk-terra-400: #D37A60;
  --tk-terra-500: #C8553D; /* brand core */
  --tk-terra-600: #B04732;
  --tk-terra-700: #8F3928;
  --tk-terra-800: #6D2B1E;
  --tk-terra-900: #4A1D14;

  /* ── Brand: Forest (secondary — depth, contrast surfaces) ── */
  --tk-forest-50:  #EEF3F0;
  --tk-forest-100: #D5E1DB;
  --tk-forest-200: #AEC4BA;
  --tk-forest-300: #84A595;
  --tk-forest-400: #567A68;
  --tk-forest-500: #2D4A3E; /* brand core */
  --tk-forest-600: #263F35;
  --tk-forest-700: #1E322A;
  --tk-forest-800: #17261F;
  --tk-forest-900: #0F1A15;

  /* ── Brand: Gold (accent — rewards, highlights; use sparingly) ── */
  --tk-gold-100: #F9F0DB;
  --tk-gold-300: #E8CE8E;
  --tk-gold-500: #D4A843; /* brand core */
  --tk-gold-700: #A37D25;

  /* ── Neutrals (warm — never pure grey) ── */
  --tk-cream:      #FEFCFA; /* page background */
  --tk-sand-50:    #F7F5F1; /* raised subtle surfaces */
  --tk-sand-100:   #F0EDE7; /* dividers on cream */
  --tk-sand-200:   #E5E1D8; /* borders */
  --tk-sand-300:   #D3CEC2; /* strong borders, disabled */
  --tk-stone-400:  #B5AFA4; /* placeholder text */
  --tk-stone-500:  #8C857B; /* secondary text */
  --tk-stone-600:  #5F5B54; /* body text on light */
  --tk-ink-800:    #3A362F; /* strong text */
  --tk-ink-900:    #2A2521; /* headlines, near-black */

  /* ── Status (warm-shifted) ── */
  --tk-success-bg:   #EFF7EF;
  --tk-success-text: #2C6E3F;
  --tk-success-line: #A9D5B3;
  --tk-warning-bg:   #FBF3E0;
  --tk-warning-text: #8A6116;
  --tk-warning-line: #EBD49A;
  --tk-danger-bg:    #FAEDEA;
  --tk-danger-text:  #A33325;
  --tk-danger-line:  #ECBCB2;
  --tk-info-bg:      #EDF2F7;
  --tk-info-text:    #33566E;
  --tk-info-line:    #B9CCDC;

  /* ── Semantic aliases ── */
  --tk-bg:            var(--tk-cream);
  --tk-surface:       #FFFFFF;
  --tk-surface-sunken: var(--tk-sand-50);
  --tk-border:        var(--tk-sand-200);
  --tk-border-strong: var(--tk-sand-300);
  --tk-text:          var(--tk-ink-900);
  --tk-text-body:     var(--tk-stone-600);
  --tk-text-muted:    var(--tk-stone-500);
  --tk-text-faint:    var(--tk-stone-400);
  --tk-primary:       var(--tk-terra-500);
  --tk-primary-hover: var(--tk-terra-600);
  --tk-on-primary:    #FFFFFF;

  /* ── Typography ── */
  --tk-font-display: 'DM Serif Display', Georgia, serif;
  --tk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tk-text-xs:   0.75rem;   /* 12 — captions, labels */
  --tk-text-sm:   0.8125rem; /* 13 — secondary UI */
  --tk-text-base: 0.9375rem; /* 15 — body */
  --tk-text-md:   1.0625rem; /* 17 — lead */
  --tk-text-lg:   1.375rem;  /* 22 — h3 */
  --tk-text-xl:   1.75rem;   /* 28 — h2 */
  --tk-text-2xl:  2.25rem;   /* 36 — h1 */
  --tk-text-3xl:  3rem;      /* 48 — display desktop */
  --tk-text-hero: clamp(2.25rem, 6vw, 3.75rem); /* landing hero */

  --tk-leading-tight: 1.15;  /* display/headlines */
  --tk-leading-snug:  1.35;  /* subheads */
  --tk-leading-body:  1.6;   /* body copy */

  --tk-tracking-caps: 0.06em; /* uppercase labels */

  /* ── Spacing (4px base) ── */
  --tk-space-1:  4px;
  --tk-space-2:  8px;
  --tk-space-3:  12px;
  --tk-space-4:  16px;
  --tk-space-5:  20px;
  --tk-space-6:  24px;
  --tk-space-8:  32px;
  --tk-space-10: 40px;
  --tk-space-12: 48px;
  --tk-space-16: 64px;
  --tk-space-20: 80px;
  --tk-space-24: 96px;

  /* ── Radii ── */
  --tk-radius-sm:   6px;  /* chips, small tags */
  --tk-radius-md:   8px;  /* inputs, buttons */
  --tk-radius-lg:   12px; /* cards */
  --tk-radius-xl:   16px; /* modals, feature cards */
  --tk-radius-2xl:  20px; /* hero surfaces */
  --tk-radius-full: 999px;

  /* ── Shadows (warm-tinted, never blue-black) ── */
  --tk-shadow-sm: 0 1px 2px rgba(58, 46, 38, 0.06);
  --tk-shadow-md: 0 2px 8px rgba(58, 46, 38, 0.08), 0 1px 2px rgba(58, 46, 38, 0.04);
  --tk-shadow-lg: 0 8px 24px rgba(58, 46, 38, 0.12), 0 2px 6px rgba(58, 46, 38, 0.06);
  --tk-shadow-xl: 0 20px 48px rgba(58, 46, 38, 0.16), 0 4px 12px rgba(58, 46, 38, 0.08);

  /* ── Motion ── */
  --tk-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --tk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tk-duration-fast: 150ms;  /* hovers, toggles */
  --tk-duration-base: 200ms;  /* most transitions */
  --tk-duration-slow: 300ms;  /* panels, modals */

  /* ── Z-index scale ── */
  --tk-z-sticky: 100;
  --tk-z-dropdown: 500;
  --tk-z-modal: 1000;
  --tk-z-toast: 2000;
}

/* Respect reduced motion globally */
@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;
  }
}