/**
 * Cascadian Tech Design Tokens
 * Based on STYLE_GUIDE.md - Pacific Northwest dark theme
 */

:root {
  /* ========== COLORS ========== */

  /* Backgrounds */
  --ct-bg-0: #0D0F10;
  --ct-bg-1: #121517;
  --ct-bg-2: #161A1D;
  --ct-bd-1: #242A2E;

  /* Text */
  --ct-tx-1: #E8ECEE;
  --ct-tx-2: #B7C3C8;
  --ct-tx-3: #8E9AA0;

  /* Accent - River */
  --ct-ac-river-200: #AEC8DA;
  --ct-ac-river-300: #B7CEDE;

  /* Accent - Steel */
  --ct-ac-steel-600: #748597;

  /* Accent - Gold */
  --ct-ac-gold-500: #B79F7A;
  --ct-ac-gold-600: #AD9876;

  /* Accent - Nature */
  --ct-ac-wood-600: #685B42;
  --ct-ac-lichen-500: #848E81;
  --ct-ac-evergreen-700: #3A412F;

  /* Semantic */
  --ct-success: var(--ct-ac-lichen-500);
  --ct-warning: var(--ct-ac-gold-500);
  --ct-error: #B26C6C;
  --ct-info: var(--ct-ac-river-200);

  /* ========== GRADIENTS ========== */
  --grad-horizon: radial-gradient(120% 60% at 70% -10%, #22323B 0%, transparent 60%),
    linear-gradient(180deg, #0D0F10 0%, #111518 100%);
  --grad-river: linear-gradient(135deg, #AEC8DA 0%, #B7CEDE 40%, #AD9876 120%);
  --grad-gold: linear-gradient(180deg, #B79F7A 0%, #AD9876 100%);

  /* ========== TYPOGRAPHY ========== */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  --font-display: 'Epilogue', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font sizes (fluid) */
  --fs-xxl: clamp(36px, 4vw + 1rem, 64px);
  --fs-xl: clamp(28px, 2.6vw + 0.5rem, 42px);
  --fs-lg: clamp(22px, 1.6vw + 0.4rem, 28px);
  --fs-md: 18px;
  --fs-sm: 15px;
  --fs-xs: 13px;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* ========== SPACING (8pt grid) ========== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ========== RADII ========== */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* ========== SHADOWS / ELEVATION ========== */
  --elev-1: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 255, 255, 0.02);
  --elev-2: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.03);

  /* ========== MOTION ========== */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms;
  --t-med: 180ms;
  --t-slow: 260ms;

  /* ========== LAYOUT ========== */
  --container-max: 1320px;
  --nav-height: 64px;

  /* ========== Z-INDEX ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
}