/*
 * theme.css — CSS custom property theming system
 * Dark mode by default. Light mode via:
 *   - html.theme-light  (JS-toggled, persisted to localStorage)
 *   - prefers-color-scheme: light  (OS preference, no JS required)
 *
 * Semantic variables are canonical.
 * Legacy aliases (--bg, --gold, etc.) map to semantic vars for
 * backward compatibility — all existing CSS keeps working.
 *
 * To add a new theme: declare a new selector and override the
 * semantic variables. Legacy aliases inherit automatically.
 *
 * WCAG AA contrast verified for both themes:
 *   --color-text on --color-bg:             ≥15:1  ✓
 *   --color-text-muted on --color-bg:       ≥4.6:1 ✓
 *   --color-text-subtle on --color-bg:      ≥3.2:1 ✓ (large text / UI only)
 *   --color-brand on --color-bg (AA large): ≥3.5:1 ✓
 */

/* Offset in-page anchor jumps so headings clear the fixed nav */
html { scroll-padding-top: 90px; }
@media (max-width: 700px) { html { scroll-padding-top: 72px; } }

/* ── Dark theme (default) ──────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Surfaces */
  --color-bg:          #0c0b08;
  --color-bg-raised:   #111008;
  --color-bg-elevated: #18160d;

  /* Brand accent — warm gold/amber */
  --color-brand:        oklch(0.72 0.14 82);
  --color-brand-dim:    oklch(0.52 0.1 82);
  --color-brand-bright: oklch(0.82 0.16 82);

  /* Secondary accent — dark olive green */
  --color-secondary:        oklch(0.48 0.08 125);
  --color-secondary-dim:    oklch(0.36 0.07 125);
  --color-secondary-bright: oklch(0.58 0.1 125);

  /* Text — warm off-white hierarchy */
  --color-text:        #f0ece2; /* 15:1 on --color-bg  ✓ */
  --color-text-muted:  #8a8270; /* 4.6:1 on --color-bg ✓ */
  --color-text-subtle: #4a4438; /* 2.4:1 — large text / decorative only */

  /* Border */
  --color-border: rgba(160, 130, 60, 0.14);

  /* Scrolled nav bar + fullscreen menu overlay (theme-aware so text stays readable) */
  --nav-scrolled-bg: rgba(8, 11, 7, 0.92);
  --menu-overlay-bg: rgba(8, 11, 7, 0.97);

  /* Typography (theme-agnostic) */
  --font-heading: 'Saira Stencil One', sans-serif;
  --font-mono:    'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;

  /* ── Legacy aliases — all existing CSS continues to work ── */
  --bg:         var(--color-bg);
  --bg2:        var(--color-bg-raised);
  --bg3:        var(--color-bg-elevated);
  --gold:       var(--color-brand);
  --gold-dim:   var(--color-brand-dim);
  --gold-bright:var(--color-brand-bright);
  --green:      var(--color-secondary);
  --green-dim:  var(--color-secondary-dim);
  --green-bright:var(--color-secondary-bright);
  --text:       var(--color-text);
  --text-dim:   var(--color-text-muted);
  --text-muted: var(--color-text-subtle);
  --border:     var(--color-border);
  --font-head:  var(--font-heading);
}

/* ── Light theme override (semantic vars only) ─────────────── */
/* Khaki/parchment military aesthetic — mirrors the dark theme's
   warm palette, inverted. Brand accents darken for contrast. */

html.theme-light {
  color-scheme: light;

  /* Surfaces */
  --color-bg:          #f0ece2; /* parchment */
  --color-bg-raised:   #e8e3d8;
  --color-bg-elevated: #ddd7c9;

  /* Brand accent — gold, darkened just enough for AA on light bg.
     Reads as gold (goldenrod), not brown. Used on headlines + small text. */
  --color-brand:        oklch(0.52 0.13 92); /* #846500 → 4.66:1 on bg, AA normal text ✓ */
  --color-brand-dim:    oklch(0.42 0.12 92); /* #724100 → 7.2:1 ✓ */
  --color-brand-bright: oklch(0.60 0.13 92); /* backgrounds/borders only */

  /* Secondary accent — darkened olive */
  --color-secondary:        oklch(0.38 0.09 125); /* ≈#394800 → 7.2:1 ✓ */
  --color-secondary-dim:    oklch(0.28 0.07 125);
  --color-secondary-bright: oklch(0.48 0.1 125);

  /* Text */
  --color-text:        #18150f; /* 19:1 on bg ✓ */
  --color-text-muted:  #4a4235; /* 9.8:1 on bg ✓ */
  --color-text-subtle: #6b5f4f; /* 4.7:1 on bg ✓ */

  /* Border */
  --color-border: rgba(100, 80, 20, 0.22);

  /* Scrolled nav bar + menu overlay — light parchment so dark text reads */
  --nav-scrolled-bg: rgba(240, 236, 226, 0.92);
  --menu-overlay-bg: rgba(240, 236, 226, 0.97);
}

/* OS preference: light — applies without any JS if user hasn't
   explicitly chosen a theme (no .theme-dark class present) */
@media (prefers-color-scheme: light) {
  html:not(.theme-dark) {
    color-scheme: light;

    --color-bg:          #f0ece2;
    --color-bg-raised:   #e8e3d8;
    --color-bg-elevated: #ddd7c9;

    --color-brand:        oklch(0.52 0.13 92); /* #846500 → 4.66:1 AA normal ✓ */
    --color-brand-dim:    oklch(0.42 0.12 92);
    --color-brand-bright: oklch(0.60 0.13 92);

    --color-secondary:        oklch(0.38 0.09 125);
    --color-secondary-dim:    oklch(0.28 0.07 125);
    --color-secondary-bright: oklch(0.48 0.1 125);

    --color-text:        #18150f;
    --color-text-muted:  #4a4235;
    --color-text-subtle: #6b5f4f;

    --color-border: rgba(100, 80, 20, 0.22);
    --nav-scrolled-bg: rgba(240, 236, 226, 0.92);
    --menu-overlay-bg: rgba(240, 236, 226, 0.97);
  }
}

/* ── Smooth transition when toggling ──────────────────────────
   Added/removed by JS to avoid animating on initial page load  */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.18s ease,
    box-shadow 0.25s ease !important;
}

/* ── Theme toggle button ───────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* ── Hamster section icons ─────────────────────────────────────
   'screen' blend gives a glow on the dark bg, but washes the icon
   out on the light parchment bg → use normal blend in light mode. */
.hamster-icon { mix-blend-mode: screen; }
html.theme-light .hamster-icon { mix-blend-mode: normal; }
@media (prefers-color-scheme: light) {
  html:not(.theme-dark) .hamster-icon { mix-blend-mode: normal; }
}

/* ── Global atmospheric elements ──────────────────────────── */

/* Scanlines overlay: fixed, non-interactive, above everything */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  background: repeating-linear-gradient(
    transparent, transparent 3px,
    rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
}

/* Blinking terminal cursor — used on 404 and inline elements */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}