/* ============================================================================
   FERNI DESIGN TOKENS - SINGLE SOURCE OF TRUTH
   ============================================================================
   All design values defined here. Never hardcode colors, spacing, or fonts.
   Import this file in every page via the head partial.
   ============================================================================ */

/* ============================================================================
   RESPONSIVE BREAKPOINTS - STANDARD VALUES
   ============================================================================
   Use these consistent breakpoint values for all media queries.
   Aligned with Tailwind CSS for consistency with design system.

   BREAKPOINTS:
   --bp-sm:  640px   Small devices (large phones, portrait tablets)
   --bp-md:  768px   Medium devices (tablets, small laptops)
   --bp-lg:  1024px  Large devices (laptops, desktops)
   --bp-xl:  1280px  Extra large devices (large desktops)
   --bp-2xl: 1536px  2X large devices (wide screens)

   USAGE EXAMPLES:
   @media (max-width: 640px) { ... }   /* Small and below */
   @media (max-width: 768px) { ... }   /* Medium and below */
   @media (max-width: 1024px) { ... }  /* Large and below */
   @media (min-width: 768px) { ... }   /* Medium and above */

   MIGRATION FROM NON-STANDARD VALUES:
   - 480px → 640px (consolidate very small phone styles)
   - 600px → 640px (consolidate to sm breakpoint)
   - 700px → 768px (consolidate to md breakpoint)
   - 767px → 768px (fix off-by-one)
   - 900px → 1024px (consolidate to lg breakpoint)
   - 968px → 1024px (consolidate to lg breakpoint)
   ============================================================================ */

:root {
  /* =========================================================================
     COLORS - BACKGROUND (Light Mode)
     Values from design-system/tokens/colors.json
     ========================================================================= */
  --color-bg-primary: #faf8f5;                    /* Paper Cream - main background */
  --color-bg-secondary: #f5f2ed;                  /* Sand - cards, sections */
  --color-bg-elevated: #fffdfb;                   /* Elevated surfaces */
  --color-bg-dark: #2c2520;                       /* Dark sections, footer */
  --color-bg-dark-elevated: #3a322c;              /* Dark elevated surfaces */
  --color-bg-dark-surface: #4a403a;               /* Dark card surfaces */
  --color-bg-code: #2c2520;                       /* Code blocks */

  /* =========================================================================
     COLORS - TEXT (Light Mode) - WCAG AA Compliant
     ========================================================================= */
  --color-text-primary: #2c2520;                  /* 12.0:1 contrast - headlines */
  --color-text-secondary: #5c544a;                /* 7.0:1 contrast - body text */
  --color-text-muted: #6b635a;                    /* 5.5:1 contrast - captions, hints */
  --color-text-dimmed: #756a5e;                   /* 4.7:1 contrast - disabled, placeholder */
  --color-text-inverse: #faf8f5;                  /* Text on dark backgrounds */

  /* =========================================================================
     COLORS - ACCENT (Light Mode)
     ========================================================================= */
  --color-accent: #3D5A45;                        /* Forest Green - CTAs, links */
  --color-accent-hover: #4a6b52;                  /* Hover state */
  --color-accent-pressed: #2d4535;                /* Pressed state */
  --color-accent-light: rgba(61, 90, 69, 0.1);    /* Light accent bg */
  --color-highlight: #b8956a;                     /* Warm Amber - emphasis (nayan) */
  --color-highlight-glow: rgba(196, 162, 101, 0.2);

  /* =========================================================================
     COLORS - SEMANTIC
     ========================================================================= */
  --color-success: #4a7352;
  --color-success-bg: rgba(74, 115, 82, 0.1);
  --color-error: #a65a52;
  --color-error-bg: rgba(166, 90, 82, 0.1);
  --color-warning: #a6854a;
  --color-warning-bg: rgba(166, 133, 74, 0.1);
  --color-info: var(--color-peter);
  --color-info-bg: rgba(58, 107, 115, 0.1);

  /* =========================================================================
     COLORS - BORDERS
     ========================================================================= */
  --color-border-subtle: rgba(44, 37, 32, 0.05);
  --color-border-medium: rgba(44, 37, 32, 0.10);
  --color-border-strong: rgba(44, 37, 32, 0.18);
  
  /* =========================================================================
     COLORS - CINEMATIC (Google Flow inspired)
     Pure blacks for video-heavy sections
     ========================================================================= */
  --color-cinematic-black: #0a0a0a;
  --color-cinematic-dark: #121212;
  --color-cinematic-deep: var(--color-bg-dark);
  --color-cinematic-surface: #222222;
  --color-cinematic-overlay-light: rgba(0, 0, 0, 0.3);
  --color-cinematic-overlay-medium: rgba(0, 0, 0, 0.5);
  --color-cinematic-overlay-heavy: rgba(0, 0, 0, 0.7);
  --color-cinematic-overlay-vignette: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.4) 100%);
  --color-cinematic-text: var(--color-text-inverse);
  --color-cinematic-text-secondary: rgba(255, 255, 255, 0.8);
  --color-cinematic-text-muted: rgba(255, 255, 255, 0.6);
  --color-cinematic-text-subtle: rgba(255, 255, 255, 0.4);
  
  /* =========================================================================
     COLORS - FERNI WARM CINEMATIC (Brand-aligned)
     Warm, earthy darks instead of cold pure blacks
     ========================================================================= */
  --color-ferni-cinematic-black: var(--color-bg-dark);
  --color-ferni-cinematic-dark: var(--color-text-primary);
  --color-ferni-cinematic-deep: var(--color-bg-dark-elevated);
  --color-ferni-cinematic-surface: var(--color-bg-dark-surface);
  --color-ferni-cinematic-elevated: #584840;
  --color-ferni-overlay-vignette: radial-gradient(circle at center, transparent 30%, rgba(44, 37, 32, 0.5) 100%);
  --color-ferni-cinematic-text: var(--color-text-inverse);
  --color-ferni-cinematic-text-secondary: rgba(255, 255, 255, 0.8);
  --color-ferni-cinematic-text-muted: rgba(255, 255, 255, 0.6);
  --color-ferni-cinematic-text-accent: var(--color-nayan);
  
  /* =========================================================================
     PREMIUM GLASSMORPHISM (Google Flow style buttons)
     ========================================================================= */
  --glass-btn-bg: rgba(255, 255, 255, 0.08);
  --glass-btn-bg-hover: rgba(255, 255, 255, 0.14);
  --glass-btn-blur: 24px;
  --glass-btn-border: 1px solid rgba(255, 255, 255, 0.12);
  --glass-btn-border-hover: 1px solid rgba(255, 255, 255, 0.2);
  --glass-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.15);
  --glass-light-btn-bg: rgba(0, 0, 0, 0.04);
  --glass-light-btn-border: 1px solid rgba(0, 0, 0, 0.08);
  
  /* Ferni Brand Glass - Warm cream tint on dark backgrounds */
  --ferni-glass-btn-bg: rgba(245, 241, 232, 0.06);
  --ferni-glass-btn-bg-hover: rgba(245, 241, 232, 0.12);
  --ferni-glass-btn-border: 1px solid rgba(245, 241, 232, 0.1);
  --ferni-glass-btn-border-hover: 1px solid rgba(245, 241, 232, 0.2);
  --ferni-glass-primary-bg: rgba(61, 90, 69, 0.15);
  --ferni-glass-primary-bg-hover: rgba(61, 90, 69, 0.25);
  --ferni-glass-primary-glow: 0 0 40px rgba(61, 90, 69, 0.25);

  /* =========================================================================
     COLORS - PERSONAS
     Values from design-system/tokens/colors.json
     ========================================================================= */
  --color-ferni: #4a6741;
  --color-ferni-secondary: #3d5a35;
  --color-ferni-glow: rgba(74, 103, 65, 0.28);
  --color-ferni-text: #4a6741;

  /* Garden/Sage Colors - Community funding theme */
  --color-sage: #4a6741;
  --color-sage-dark: #3d5a35;
  --color-bg-sage-subtle: rgba(74, 103, 65, 0.05);

  --color-jack: #9a7b5a;
  --color-jack-secondary: #7d6348;
  --color-jack-glow: rgba(154, 123, 90, 0.28);
  --color-peter: #3a6b73;
  --color-peter-secondary: #2d5359;
  --color-peter-glow: rgba(58, 107, 115, 0.28);
  --color-alex: #5a6b8a;
  --color-alex-secondary: #4a5a73;
  --color-alex-glow: rgba(90, 107, 138, 0.28);
  --color-maya: #a67a6a;
  --color-maya-secondary: #8a635a;
  --color-maya-glow: rgba(166, 122, 106, 0.28);
  --color-jordan: #c4856a;
  --color-jordan-secondary: #a86d55;
  --color-jordan-glow: rgba(196, 133, 106, 0.28);
  --color-jaggi: #b8956a;
  --color-jaggi-secondary: #9a7a52;

  /* Nayan (alias for jaggi) */
  --color-nayan: #b8956a;
  --color-nayan-secondary: #9a7a52;
  --color-nayan-glow: rgba(184, 149, 106, 0.28);

  /* =========================================================================
     PERSONA COLORS - Extended Palette (for visualizations)
     Light/Subtle/Glow variants for data viz and capabilities showcase
     ========================================================================= */
  --color-ferni-light: #5a7a51;
  --color-ferni-dark: var(--color-ferni-secondary);
  --color-ferni-subtle: rgba(74, 103, 65, 0.1);
  --color-ferni-border: rgba(74, 103, 65, 0.3);
  --color-ferni-glow: rgba(74, 103, 65, 0.4);

  --color-maya-light: #b88a7a;
  --color-maya-dark: #8a5a4a;
  --color-maya-subtle: rgba(166, 122, 106, 0.1);
  --color-maya-glow: rgba(166, 122, 106, 0.4);

  --color-peter-light: #4a7b83;
  --color-peter-dark: #2d5a61;
  --color-peter-subtle: rgba(58, 107, 115, 0.1);
  --color-peter-glow: rgba(58, 107, 115, 0.4);

  --color-jordan-light: #d4957a;
  --color-jordan-dark: #a87058;
  --color-jordan-subtle: rgba(196, 133, 106, 0.1);
  --color-jordan-glow: rgba(196, 133, 106, 0.4);

  --color-alex-light: #6a7b9a;
  --color-alex-dark: #4a5b7a;
  --color-alex-subtle: rgba(90, 107, 138, 0.1);
  --color-alex-glow: rgba(90, 107, 138, 0.4);

  --color-nayan-light: #c8a57a;
  --color-nayan-dark: #9a7b55;
  --color-nayan-subtle: rgba(184, 149, 106, 0.1);
  --color-nayan-glow: rgba(184, 149, 106, 0.4);

  /* =========================================================================
     TYPOGRAPHY
     ========================================================================= */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.25rem;       /* 20px */
  --text-2xl: 1.5rem;       /* 24px */
  --text-3xl: 2rem;         /* 32px */
  --text-4xl: 2.5rem;       /* 40px */
  --text-5xl: 3rem;         /* 48px */
  --text-6xl: 4rem;         /* 64px */
  --text-7xl: 6rem;         /* 96px - large headlines */
  --text-8xl: 9rem;         /* 144px - very large */
  --text-9xl: 12rem;        /* 192px - massive */
  --text-10xl: 16rem;       /* 256px - cinematic */
  --text-hero: clamp(4rem, 18vw, 20rem);     /* Responsive hero */
  --text-hero-sm: clamp(2.5rem, 12vw, 10rem); /* Smaller hero */

  /* Line Heights */
  --leading-cinematic: 0.85;
  --leading-hero: 0.9;
  --leading-display: 0.95;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  
  /* Letter Spacing - Cinematic */
  --tracking-cinematic: -0.05em;
  --tracking-hero: -0.04em;
  --tracking-display: -0.03em;

  /* =========================================================================
     SPACING
     ========================================================================= */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* =========================================================================
     BORDERS & RADIUS
     ========================================================================= */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* =========================================================================
     SHADOWS
     ========================================================================= */
  --shadow-sm: 0 1px 2px rgba(44, 37, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(44, 37, 32, 0.08);
  --shadow-lg: 0 8px 24px rgba(44, 37, 32, 0.12);
  --shadow-xl: 0 12px 32px rgba(44, 37, 32, 0.16);
  
  /* Cinematic shadows (for dark backgrounds) */
  --shadow-cinematic-sm: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-cinematic-md: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-cinematic-lg: 0 16px 64px rgba(0, 0, 0, 0.6);
  --shadow-cinematic-xl: 0 32px 128px rgba(0, 0, 0, 0.7);
  --shadow-glow-white: 0 0 40px rgba(255, 255, 255, 0.15);
  --shadow-glow-accent: 0 0 60px rgba(74, 103, 65, 0.3);

  /* =========================================================================
     TRANSITIONS
     ========================================================================= */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-cinematic: 800ms;
  --duration-dramatic: 1200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-dramatic: cubic-bezier(0.7, 0, 0.3, 1);
  --transition-cinematic: all 800ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-hero: all 1200ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* =========================================================================
     Z-INDEX
     ========================================================================= */
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-fixed: 100;
  --z-modal-backdrop: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   TYPOGRAPHY BASE
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  margin-bottom: var(--space-4);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-secondary);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
}

/* ============================================================================
   LAYOUT
   ============================================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: 900px;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-accent { color: var(--color-accent); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   CINEMATIC UTILITIES (Google Flow inspired)
   ============================================================================ */

/* Hero Typography */
.text-hero {
  font-size: var(--text-hero);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}

.text-hero-sm {
  font-size: var(--text-hero-sm);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-display);
}

/* Cinematic Backgrounds */
.bg-cinematic {
  background-color: var(--color-cinematic-black);
  color: var(--color-cinematic-text);
}

.bg-cinematic-deep {
  background-color: var(--color-cinematic-deep);
}

/* Video Hero */
.hero-video-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--color-cinematic-black);
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-cinematic-overlay-vignette);
  pointer-events: none;
}

/* Glass Button (Google Flow style) */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  background: var(--glass-btn-bg);
  backdrop-filter: blur(var(--glass-btn-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-btn-blur)) saturate(120%);
  border: var(--glass-btn-border);
  border-radius: var(--radius-full);
  color: var(--color-cinematic-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--glass-btn-shadow);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.btn-glass:hover {
  background: var(--glass-btn-bg-hover);
  border: var(--glass-btn-border-hover);
  transform: translateY(-2px);
}

/* Text Gradient */
.text-gradient-light {
  background: linear-gradient(135deg, var(--color-text-inverse) 0%, rgba(255, 255, 255, 0.7) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Text Glow */
.text-glow {
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.3),
    0 0 40px rgba(255, 255, 255, 0.1);
}

/* Portal Mask */
.portal-mask {
  clip-path: circle(25% at 50% 50%);
  transition: clip-path 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-mask:hover {
  clip-path: circle(60% at 50% 50%);
}

/* Cinematic Section */
.section-cinematic {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-cinematic-black);
  color: var(--color-cinematic-text);
}

/* Minimal Navigation */
.nav-minimal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  background: transparent;
  transition: all 300ms ease;
}

.nav-minimal.scrolled {
  height: 56px;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Responsive Cinematic */
@media (max-width: 768px) {
  .text-hero {
    font-size: clamp(2.5rem, 12vw, 8rem);
  }
  
  .text-hero-sm {
    font-size: clamp(1.75rem, 8vw, 4rem);
  }
  
  .btn-glass {
    padding: 14px 24px;
    font-size: var(--text-sm);
  }
}

/* ============================================================================
   DARK MODE - System Dark Theme Variable Overrides
   ============================================================================
   When the user has dark mode enabled, override all color tokens to ensure
   excellent contrast and visibility throughout the site.
   Values from design-system/tokens/colors.json (Cedar Night theme)
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Background Colors - Warm Ferni Dark Palette (Cedar Night) */
    --color-bg-primary: #584840;                  /* Warm dark brown */
    --color-bg-secondary: #60504a;                /* Slightly lighter */
    --color-bg-elevated: #70605a;                 /* Card surfaces */
    --color-bg-dark: #2a2420;                     /* Deepest dark */
    --color-bg-dark-elevated: #3a322c;            /* Dark elevated */
    --color-bg-dark-surface: #4a403a;             /* Dark surface */
    --color-bg-glass: rgba(230, 195, 160, 0.08);
    --color-bg-overlay: rgba(88, 72, 64, 0.95);

    /* Text Colors - High Contrast for Readability */
    --color-text-primary: #faf6f0;                /* Cream white for headlines */
    --color-text-secondary: #f0ebe4;              /* Warm cream for body */
    --color-text-muted: #e8e2da;                  /* Muted for captions */
    --color-text-dimmed: #ddd6cc;                 /* Subtle text */
    --color-text-inverse: #2a2420;                /* Dark text on light bg */

    /* Accent Colors - Brighter for Dark Mode */
    --color-accent: #d4a84a;                      /* Golden amber (warm) */
    --color-accent-hover: #e0bc6a;                /* Even brighter on hover */
    --color-accent-pressed: #c49a3a;              /* Pressed state */
    --color-accent-light: rgba(212, 168, 74, 0.2);
    --color-accent-glow: rgba(212, 168, 74, 0.22);
    --color-highlight: #d4b275;                   /* Brighter warm amber */
    --color-highlight-glow: rgba(212, 178, 117, 0.3);

    /* Border Colors - Visible on Dark */
    --color-border-subtle: rgba(215, 185, 145, 0.12);
    --color-border-medium: rgba(215, 185, 145, 0.20);
    --color-border-strong: rgba(215, 185, 145, 0.30);

    /* Semantic Colors - Bright for Dark Mode */
    --color-success: #6bc48f;
    --color-success-bg: rgba(107, 196, 143, 0.22);
    --color-error: #e07575;
    --color-error-bg: rgba(224, 117, 117, 0.22);
    --color-warning: #e0b860;
    --color-warning-bg: rgba(224, 184, 96, 0.22);

    /* Persona Text Colors - WCAG AA compliant on dark backgrounds */
    --color-ferni-text: #a5c99a;
    --color-jack-text: #d4c4a8;
    --color-peter-text: #8bc4cf;
    --color-alex-text: #a8b8d8;
    --color-maya-text: #e0b8a8;
    --color-jordan-text: #f0c0a0;
    --color-nayan-text: #e8d0a8;

    /* Shadows - Deeper for Dark Mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.6);
  }

  /* Body Dark Background */
  body {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  /* All headings to white */
  h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
  }

  /* Links - Brighter accent */
  a {
    color: var(--color-highlight);
  }

  a:hover {
    color: var(--color-accent-hover);
  }

  /* Code blocks */
  code {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
  }
}

/* ============================================================================
   DATA-THEME DARK MODE (for manual toggle)
   ============================================================================ */
[data-theme="dark"] {
  /* Background Colors - Warm Ferni Dark Palette (Cedar Night) */
  --color-bg-primary: #584840;
  --color-bg-secondary: #60504a;
  --color-bg-elevated: #70605a;
  --color-bg-dark: #2a2420;
  --color-bg-dark-elevated: #3a322c;
  --color-bg-dark-surface: #4a403a;
  --color-bg-glass: rgba(230, 195, 160, 0.08);
  --color-bg-overlay: rgba(88, 72, 64, 0.95);

  /* Text Colors - High Contrast */
  --color-text-primary: #faf6f0;
  --color-text-secondary: #f0ebe4;
  --color-text-muted: #e8e2da;
  --color-text-dimmed: #ddd6cc;
  --color-text-inverse: #2a2420;

  /* Accent Colors */
  --color-accent: #d4a84a;
  --color-accent-hover: #e0bc6a;
  --color-accent-pressed: #c49a3a;
  --color-accent-light: rgba(212, 168, 74, 0.2);
  --color-accent-glow: rgba(212, 168, 74, 0.22);
  --color-highlight: #d4b275;
  --color-highlight-glow: rgba(212, 178, 117, 0.3);

  /* Border Colors */
  --color-border-subtle: rgba(215, 185, 145, 0.12);
  --color-border-medium: rgba(215, 185, 145, 0.20);
  --color-border-strong: rgba(215, 185, 145, 0.30);

  /* Semantic Colors */
  --color-success: #6bc48f;
  --color-success-bg: rgba(107, 196, 143, 0.22);
  --color-error: #e07575;
  --color-error-bg: rgba(224, 117, 117, 0.22);
  --color-warning: #e0b860;
  --color-warning-bg: rgba(224, 184, 96, 0.22);

  /* Persona Text Colors - WCAG AA */
  --color-ferni-text: #a5c99a;
  --color-jack-text: #d4c4a8;
  --color-peter-text: #8bc4cf;
  --color-alex-text: #a8b8d8;
  --color-maya-text: #e0b8a8;
  --color-jordan-text: #f0c0a0;
  --color-nayan-text: #e8d0a8;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.6);
}