/* ==========================================================================
   Design tokens — v2, finalized visual direction (was placeholder-only).

   Concept: an "amber status light" accent — the color of a terminal glow
   and hardware indicator LEDs, tying the palette back to the actual world
   this site is about (infrastructure, terminals, systems). One hue family,
   shifted for contrast between themes rather than swapped for a different
   hue entirely.

   Theming follows the 3-block pattern so every state is covered:
     1. bare :root            -> complete light palette (the default)
     2. @media prefers-color-scheme: dark, guarded by :not([data-theme="light"])
     3. :root[data-theme="dark"] -> same dark tokens, wins over the toggle
   js/main.js sets data-theme explicitly once a preference is known
   (stored choice, or OS default on first visit).
   ========================================================================== */

:root {
  /* ---- Color: light (default) ---- */
  --color-bg: #FAFAF8;
  --color-bg-elevated: #F1EFE9;
  --color-bg-inset: #E9E6DE;
  --color-text: #18150F;
  --color-text-muted: #6B6459;
  --color-border: #DFDACF;
  --color-accent: #C6541A;
  --color-accent-contrast: #FFFFFF;
  --color-accent-soft: #C6541A1A;

  /* ---- Typography ----
     Display/mono: IBM Plex Mono — carries the hero, nav wordmark, section
     kickers, timestamps and tags. Grounded choice: a terminal/engineering
     face for a site about infrastructure and automation, not a "safe"
     generic sans.
     Body: IBM Plex Sans — same type family, built to pair with the mono,
     used for anything read at length (lede, CV bullets, blog body). */
  --font-display: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-000: 0.75rem;
  --fs-100: 0.875rem;
  --fs-200: 1rem;
  --fs-300: 1.125rem;
  --fs-400: 1.375rem;
  --fs-500: 1.875rem;
  --fs-600: clamp(2.25rem, 4vw, 3rem);
  --fs-700: clamp(2.75rem, 6vw, 4.5rem);
  --fs-800: clamp(3rem, 7vw, 5.5rem);

  --lh-tight: 1.1;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Layout ---- */
  --container-max: 72rem;
  --container-pad: var(--space-6);
  --radius-sm: 3px;
  --radius-md: 6px;
  --header-height: 4rem;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  color-scheme: light;
}

/* ---- Dark: OS preference on first visit (no explicit choice yet) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #131110;
    --color-bg-elevated: #1D1A17;
    --color-bg-inset: #262220;
    --color-text: #F3EFE8;
    --color-text-muted: #9C948A;
    --color-border: #34302B;
    --color-accent: #FF8A3D;
    --color-accent-contrast: #17130D;
    --color-accent-soft: #FF8A3D26;
    color-scheme: dark;
  }
}

/* ---- Dark: explicit choice via the toggle, wins regardless of OS ---- */
:root[data-theme="dark"] {
  --color-bg: #131110;
  --color-bg-elevated: #1D1A17;
  --color-bg-inset: #262220;
  --color-text: #F3EFE8;
  --color-text-muted: #9C948A;
  --color-border: #34302B;
  --color-accent: #FF8A3D;
  --color-accent-contrast: #17130D;
  --color-accent-soft: #FF8A3D26;
  color-scheme: dark;
}