/* ==========================================================
   THEMES

   Shared color themes and inheritance.

   Contains:
   - Section themes
   - Card themes
   - Color inheritance
   - Theme utilities

   This file defines appearance, not layout.
   ========================================================== */

:root {
  /* Brand */
  --brand-accent: #c9a349;
  --brand-accent-hover: #d9b661;
  --brand-accent-muted: #8a7030;
  --brand-accent-shadow: #c9a34930;
  
  /* Typography */
  --font-display: "League Spartan", "Arial Black", Arial, sans-serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-accent: "Raleway", "Segoe UI", Arial, sans-serif;
  
  /* Layout */
  --container: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --hero-h: min(100vh, 900px);

  /* Border Radius */
  --radius: 4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.30);

  --shadow-sm-light: 0 1px 2px rgba(55, 55, 55, 0.3), 0 2px 4px rgba(55, 55, 55, 0.3);
  --shadow-md-light: 0 4px 8px rgba(55, 55, 55, 0.3), 0 8px 24px rgba(55, 55, 55, 0.3);
  --shadow-xl-light: 0 20px 60px rgba(55, 55, 55, 0.3);

  /* Default Theme before edits by theme.css*/
  --color-bg: #ffffff;
  --color-surface: #f6f5f2;

  --color-heading: #0a0a0a;
  --color-text: #1b1b1b;
  --color-muted: #666666;
  --color-border: #e6e3dc;
}

.theme-dark {
  --color-bg: #0a0a0a;
  --color-surface: #151515;
  --color-inverse: #f6f5f2;

  --color-heading: #ffffffed;
  --color-text: rgba(255, 255, 255, 0.941);
  --color-muted: rgba(255, 255, 255, 0.76);
  
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-muted: rgba(0, 0, 0, 0.5);
  --color-accent: var(--brand-accent);
  --color-accent-hover: var(--brand-accent-hover);
  --color-accent-muted: var(--brand-accent-muted);
  --color-accent-shadow: var(--brand-accent-shadow);

  --section-scroll-border: #ffffff6a;
  --section-scroll-wheel: #d9b661;

  background: var(--color-bg);
  color: var(--color-text);
}

.theme-light {
  --color-bg: #ffffff;
  --color-surface: #f6f5f2;
  --color-inverse: #151515;

  --color-heading: #0a0a0a;
  --color-text: #1b1b1b;
  --color-muted: #404040;

  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-muted: rgba(0, 0, 0, 0.5);
  --color-accent: var(--brand-accent);
  --color-accent-hover: var(--brand-accent-hover);
  --color-accent-muted: var(--brand-accent-muted);
  --color-accent-shadow: var(--brand-accent-shadow);

  --section-scroll-border: #0000005a;
  --section-scroll-wheel: #d9b661;

  background: var(--color-bg);
  color: var(--color-text);
}

.theme-dark .theme-intro,
.theme-dark .footnote,
.theme-dark .subtle,
.theme-light .theme-intro,
.theme-light .footnote,
.theme-light .subtle,
.card-dark .theme-intro,
.card-dark .footnote,
.card-dark .subtle,
.card-light .theme-intro,
.card-light .footnote,
.card-light .subtle {
  color: var(--color-muted);
}