/* ============================================================
   ENDORA — Design Tokens
   Palette:
     #FFFFFF   White         — light bg
     #C4BBAF   Silver        — light surfaces / dark secondary text
     #A5978B   Taupe         — tertiary / mid accent
     #444140   Graphite      — dark surfaces / light primary action
     #1E1E24   Shadow Grey   — dark bg / light primary text
   ============================================================ */

/* ── Light mode (default) ────────────────────────────────── */
:root {
  /* Backgrounds & Surfaces — warm cream base, not pure white */
  --color-bg:              #F4EFE9;
  --color-surface:         #EDE7E0;
  --color-surface-raised:  #E4DDD5;
  --color-surface-hover:   #DAD3C9;
  --color-border:          #C4BBAF;   /* Silver */
  --color-border-subtle:   #D4CEC6;

  /* Text */
  --color-text-primary:    #1E1E24;   /* Shadow Grey */
  --color-text-secondary:  #444140;   /* Graphite */
  --color-text-tertiary:   #A5978B;   /* Taupe */
  --color-text-inverted:   #FFFFFF;

  /* Accent — Graphite on white reads strong and premium */
  --color-accent:          #444140;
  --color-accent-hover:    #1E1E24;
  --color-accent-subtle:   rgba(68, 65, 64, 0.08);
  --color-accent-glow:     rgba(68, 65, 64, 0.06);

  /* Status */
  --color-success:         #2E6B42;
  --color-success-bg:      rgba(46, 107, 66, 0.10);
  --color-error:           #922828;
  --color-error-bg:        rgba(146, 40, 40, 0.10);
  --color-warning:         #7A5A1E;
  --color-warning-bg:      rgba(122, 90, 30, 0.10);
  --color-warning-text:    #6B4E18;

  /* UI chrome */
  --color-header-scrolled: rgba(244, 239, 233, 0.94);
  --color-footer-bg:       #E4DDD5;
  --color-search-overlay:  rgba(244, 239, 233, 0.98);
  --color-modal-overlay:   rgba(30, 30, 36, 0.55);
  --color-hero-gradient:   #DAD3C9;

  /* Shadows — lighter on white */
  --shadow-sm:    0 1px 3px  rgba(30, 30, 36, 0.08);
  --shadow-md:    0 4px 16px rgba(30, 30, 36, 0.10);
  --shadow-lg:    0 16px 48px rgba(30, 30, 36, 0.14);
  --shadow-glow:  0 0 32px   rgba(68, 65, 64, 0.06);

  /* Typography */
  --font-display:    'Playfair Display', 'Georgia', serif;
  --font-body:       'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;

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

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);

  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-cinema:  800ms;

  /* Layout */
  --max-w-content:  1440px;
  --max-w-prose:    720px;
  --max-w-narrow:   560px;
  --header-h:       72px;
}

/* ── Dark mode override (manual toggle only — no OS auto-detection) ── */

/* ── Manual dark override (toggle button sets this) ─────────── */
[data-theme="dark"] {
  --color-bg:              #1E1E24;
  --color-surface:         #28282E;
  --color-surface-raised:  #444140;
  --color-surface-hover:   #504D4A;
  --color-border:          #444140;
  --color-border-subtle:   #35332F;
  --color-text-primary:    #F0EDE8;
  --color-text-secondary:  #C4BBAF;
  --color-text-tertiary:   #A5978B;
  --color-text-inverted:   #1E1E24;
  --color-accent:          #C4BBAF;
  --color-accent-hover:    #D4C9BC;
  --color-accent-subtle:   rgba(196, 187, 175, 0.12);
  --color-accent-glow:     rgba(196, 187, 175, 0.08);
  --color-success:         #5A9068;
  --color-success-bg:      rgba(90, 144, 104, 0.14);
  --color-error:           #A84848;
  --color-error-bg:        rgba(168, 72, 72, 0.14);
  --color-warning:         #A07E3A;
  --color-warning-bg:      rgba(160, 126, 58, 0.14);
  --color-warning-text:    #C8A230;
  --color-header-scrolled: rgba(30, 30, 36, 0.94);
  --color-footer-bg:       #131318;
  --color-search-overlay:  rgba(30, 30, 36, 0.97);
  --color-modal-overlay:   rgba(0, 0, 0, 0.70);
  --color-hero-gradient:   #2A2A30;
  --shadow-sm:    0 1px 3px  rgba(0, 0, 0, 0.30);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.50);
  --shadow-glow:  0 0 32px   rgba(196, 187, 175, 0.08);
}