/* ═══════════════════════════════════════════════════════════════
   ATLAS MERIDIA DESIGN TOKENS
   Version: 4.1.0
   Last updated: December 2025
   
   Usage: Import in globals.css after Tailwind base
   These tokens are the source of truth for all styling.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────
     COLOR SYSTEM
     ───────────────────────────────────────────────────────────── */
  
  /* Navy Scale — desaturated, slightly warm */
  --navy-300: #7d8690;
  --navy-400: #5c6672;
  --navy-500: #3d4754;
  --navy-600: #2a3440;
  --navy-700: #1e2630;
  --navy-800: #161c24;
  --navy-900: #0e1318;
  --navy-950: #08090c;
  
  /* Warm Cream Scale — muted, paper-like */
  --cream-50: #f8f6f1;
  --cream-100: #f3f0ea;
  --cream-200: #eae6de;
  --cream-300: #dfd9ce;
  --cream-400: #d0c8bb;
  --cream-500: #b8b0a2;
  
  /* Amber-Gold Accent Scale */
  --accent-light: #ddb878;
  --accent: #c9924a;
  --accent-dark: #a87a3a;
  --accent-deep: #8a6530;
  
  /* Semantic Colors */
  --success: #6a9a70;
  --error: #b05454;
  --warning: var(--accent);
  
  /* ─────────────────────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────────────────────── */
  
  /* Font Families (set via next/font in layout.tsx) */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-chinese: 'Noto Serif TC', serif;
  
  /* Type Scale */
  --text-xs: 0.75rem; /* 12px — Legal, footnotes */
  --text-sm: 0.875rem; /* 14px — Captions, labels */
  --text-base: 1.125rem; /* 18px — UI text */
  --text-body: 1.25rem; /* 20px — Primary reading size */
  --text-lg: 1.5rem; /* 24px — Lead paragraphs */
  --text-xl: 1.75rem; /* 28px — Subheadings */
  --text-2xl: 2.25rem; /* 36px — Section titles */
  --text-3xl: 3rem; /* 48px — Page titles */
  --text-4xl: 4rem; /* 64px — Hero headlines */
  --text-5xl: 5.5rem; /* 88px — Display */
  
  /* Line Heights */
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  
  /* Letter Spacing */
  --tracking-tight: -0.02em;   /* Headlines */
  --tracking-body: -0.01em;   /* Body text */
  
  /* ─────────────────────────────────────────────────────────────
     SPACING
     ───────────────────────────────────────────────────────────── */
  
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-8: 3rem; /* 48px */
  --space-10: 4rem; /* 64px */
  --space-12: 6rem; /* 96px */
  --space-16: 8rem; /* 128px */
  --space-20: 10rem; /* 160px */
  
  /* ─────────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────────── */
  
  --width-prose: 38rem; /* ~608px — Article body width */
  --width-wide: 52rem; /* ~832px — Wide content */
  --width-full: 80rem; /* ~1280px — Max container */
  
  /* ─────────────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────────────── */
  
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  
  /* ─────────────────────────────────────────────────────────────
     EFFECTS
     ───────────────────────────────────────────────────────────── */
  
  --border-radius-sm: 4px;
  --border-radius: 6px;
  --border-radius-lg: 12px;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE THEME
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
  --bg-primary: var(--cream-100);
  --bg-deep: var(--cream-50);
  --bg-elevated: var(--cream-50);
  --text-primary: var(--navy-700);
  --text-secondary: var(--navy-600);
  --text-muted: var(--navy-400);
  --border-color: var(--cream-400);
  
  --body-weight: 400;
  --body-tracking: 0;
  --accent-text: #a87a3a;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE THEME (Default for ATLAS Meridia)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg-primary: var(--navy-900);
  --bg-deep: var(--navy-950);
  --bg-elevated: var(--navy-800);
  --text-primary: #d5cab8;
  --text-secondary: #bfb4a4;
  --text-muted: #9a8f80;
  --border-color: var(--navy-600);
  
  --body-weight: 300;
  --body-tracking: 0.01em;
  --accent-text: var(--accent);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: var(--navy-900);
    --bg-deep: var(--navy-950);
    --bg-elevated: var(--navy-800);
    --text-primary: #d5cab8;
    --text-secondary: #bfb4a4;
    --text-muted: #9a8f80;
    --border-color: var(--navy-600);
    
    --body-weight: 300;
    --body-tracking: 0.01em;
    --accent-text: var(--accent);
  }
}