/* ============================================================
   BUDDHIST DIPLOMACY — Design Tokens
   Editorial Research Journal Design System
   ============================================================ */

/* --- Light Mode (Default) --- */
:root {
  /* Core Editorial Palette */
  --burgundy: #541C26;
  --burgundy-light: #6B2533;
  --burgundy-dark: #3D1019;
  --ivory: #F5F0E6;
  --ivory-warm: #EDE7DA;
  --ivory-cool: #FAF8F3;
  --charcoal: #171717;
  --charcoal-soft: #2A2A2A;
  --gold: #C6963B;
  --gold-light: #D4AA5A;
  --gold-muted: rgba(198, 150, 59, 0.15);
  --sage: #6F7867;
  --sage-light: #8A9381;
  --slate: #263B55;
  --slate-light: #3A5272;
  --neutral: #D9D3C7;
  --neutral-light: #E8E3D9;

  /* Surface Colors */
  --surface: #FAF8F3;
  --surface-canvas: #FAF8F3;
  --surface-card: #FFFFFF;
  --surface-panel: #F3EFE6;
  --surface-tint: #ECE6DA;
  --surface-alt: #FAF8F3;
  --surface-dim: #F0EAE0;
  --surface-dark: #171717;

  --on-surface: #171717;
  --on-surface-secondary: #555248;
  --on-surface-tertiary: #827C70;
  --on-surface-dark: #FAF8F3;

  /* Interactive */
  --link: var(--burgundy);
  --link-hover: var(--burgundy-light);
  --accent: var(--gold);
  --accent-hover: var(--gold-light);

  /* Borders */
  --border: rgba(23, 23, 23, 0.09);
  --border-strong: rgba(23, 23, 23, 0.16);
  --border-gold: rgba(198, 150, 59, 0.30);

  /* Admin & Component Bridges */
  --primary: var(--burgundy);
  --primary-hover: var(--burgundy-light);
  --on-primary: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: var(--surface-panel);
  --surface-container: var(--surface-dim);
  --surface-container-high: var(--surface-tint);
  --surface-container-highest: var(--neutral-light);
  --on-surface-variant: var(--on-surface-secondary);
  --outline: var(--on-surface-tertiary);
  --outline-variant: var(--border);
  --error: #C93B2B;
  --glass-bg: rgba(250, 248, 243, 0.85);
  --glass-blur: blur(12px);
  --glass-border: 1px solid var(--border);
  --elevation-ambient: var(--shadow-md);
  --rounded-xl: var(--radius-xl);
  --rounded-lg: var(--radius-lg);
  --rounded-md: var(--radius-md);
  --rounded-sm: var(--radius-sm);
  --rounded: var(--radius-md);
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-base) var(--ease-out);

  /* Hero Imagery & Atmospheric Lighting */
  --hero-image: url('../images/hero-himalaya.jpg');
  --hero-overlay: linear-gradient(
    to top,
    rgba(23, 23, 23, 0.88) 0%,
    rgba(84, 28, 38, 0.28) 40%,
    rgba(23, 23, 23, 0.10) 70%,
    rgba(23, 23, 23, 0.25) 100%
  );

  /* Region Colors */
  --region-nepal: var(--burgundy);
  --region-india: #B8860B;
  --region-china: var(--slate);
  --region-tibet: #8B3A3A;
  --region-asia: var(--sage);
  --region-global: #555248;
  --region-analysis: var(--gold);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(23, 23, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(23, 23, 23, 0.06);
  --shadow-lg: 0 8px 30px rgba(23, 23, 23, 0.08);

  /* ---- Typography ---- */
  --font-display: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Inter', -apple-system, sans-serif;

  /* Display — Hero Headlines */
  --display-xl-size: clamp(48px, 6vw, 80px);
  --display-xl-line: 1.05;
  --display-xl-spacing: -0.025em;
  --display-xl-weight: 600;

  /* Display Large */
  --display-lg-size: clamp(36px, 4vw, 56px);
  --display-lg-line: 1.12;
  --display-lg-spacing: -0.02em;
  --display-lg-weight: 600;

  /* Headline Large */
  --headline-lg-size: clamp(26px, 2.5vw, 36px);
  --headline-lg-line: 1.2;
  --headline-lg-spacing: -0.015em;
  --headline-lg-weight: 600;

  /* Headline Medium */
  --headline-md-size: clamp(22px, 2vw, 28px);
  --headline-md-line: 1.3;
  --headline-md-weight: 600;

  /* Headline Small */
  --headline-sm-size: clamp(18px, 1.5vw, 22px);
  --headline-sm-line: 1.35;
  --headline-sm-weight: 600;

  /* Body Large — Article reading */
  --body-lg-size: 19px;
  --body-lg-line: 1.8;
  --body-lg-weight: 400;

  /* Body Medium */
  --body-md-size: 16px;
  --body-md-line: 1.6;
  --body-md-weight: 400;

  /* Body Small */
  --body-sm-size: 14px;
  --body-sm-line: 1.55;
  --body-sm-weight: 400;

  /* Label — Navigation, Tags */
  --label-size: 11px;
  --label-weight: 600;
  --label-spacing: 0.12em;
  --label-line: 1;

  /* Caption */
  --caption-size: 13px;
  --caption-weight: 400;
  --caption-line: 1.4;

  /* ---- Spacing ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;

  /* Section spacing — generous editorial whitespace */
  --section-gap: clamp(80px, 10vw, 140px);
  --section-gap-sm: clamp(48px, 6vw, 80px);

  /* Container */
  --container-max: 1360px;
  --container-reading: 720px;
  --container-narrow: 640px;
  --gutter: 24px;
  --margin-mobile: 20px;
  --margin-desktop: 48px;

  /* ---- Border Radius (Editorial — restrained) ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 100px;

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-entrance: 800ms;

  /* ---- Z-Index ---- */
  --z-ticker: 5;
  --z-header: 50;
  --z-mobile-menu: 100;
  --z-search: 150;
  --z-modal: 200;
  --z-toast: 300;
}


/* --- Dark Mode --- */
[data-theme="dark"],
[data-theme="dark"] body {
  /* Surface Colors */
  --surface: #121110;
  --surface-canvas: #121110;
  --surface-card: #1B1A18;
  --surface-panel: #181716;
  --surface-tint: #1F1E1C;
  --surface-alt: #161514;
  --surface-dim: #191816;
  --surface-dark: #0A0A09;

  /* Text Colors */
  --on-surface: #EDE7DA;
  --on-surface-secondary: #B5AFA3;
  --on-surface-tertiary: #807B70;
  --on-surface-dark: #EDE7DA;

  /* Interactive */
  --link: var(--gold);
  --link-hover: var(--gold-light);

  /* Borders */
  --border: rgba(232, 227, 217, 0.08);
  --border-strong: rgba(232, 227, 217, 0.14);
  --border-gold: rgba(198, 150, 59, 0.28);

  /* Admin & Component Bridges in Dark Mode */
  --primary: var(--gold);
  --primary-hover: var(--gold-light);
  --on-primary: #121110;
  --surface-container-lowest: #161514;
  --surface-container-low: #1B1A18;
  --surface-container: #201F1D;
  --surface-container-high: #262522;
  --surface-container-highest: #2E2D29;
  --on-surface-variant: #B5AFA3;
  --outline: #807B70;
  --outline-variant: rgba(232, 227, 217, 0.12);
  --glass-bg: rgba(27, 26, 24, 0.85);
  --glass-border: 1px solid var(--border);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.45);

  /* Hero Imagery in Dark Mode */
  --hero-image: url('../images/hero-himalaya-dark.jpg');
  --hero-overlay: linear-gradient(
    to top,
    rgba(10, 10, 12, 0.90) 0%,
    rgba(18, 20, 32, 0.45) 40%,
    rgba(10, 10, 12, 0.15) 70%,
    rgba(10, 10, 12, 0.30) 100%
  );
}

/* Explicit dark mode body — bulletproof fallback */
[data-theme="dark"] body,
html[data-theme="dark"] body {
  background-color: #121110;
  color: #EDE7DA;
}