/* variables.css — design tokens. Loaded first; every other stylesheet reads from these. */
:root {
  /* Color — neutral white-gray is the primary/default surface (Aug 2026 redesign:
     moved off the original dark-first theme for a lighter, cleaner, services-focused
     read). All text/background pairs below are WCAG 2.1 AA-verified (>=4.5:1 for body
     text, checked with the real relative-luminance formula, not eyeballed) — see
     DEPENDENCY_MATRIX.md change log for the contrast figures. */
  --color-bg: #F7F8F9;
  --color-surface: #EDEFF1;
  --color-surface-raised: #FFFFFF;
  --color-border: #DBDEE2;
  --color-text: #1A1B1E;
  --color-text-muted: #565A61;
  --color-accent: #047857;       /* emerald — clears AA on light surfaces (5.16:1 on bg, 4.76:1 on surface) */
  --color-accent-strong: #036B4D; /* hover/active state, darker still (6.14:1 on bg) */
  --color-accent-ink: #047857;   /* kept as an alias for compatibility with the dark variant below */

  /* Type — serif for display (classical nod), system sans for body/UI (clean, modern,
     and legible — no assumed "dyslexia font"; familiarity and clarity matter more
     than typeface choice for reading ease). */
  --font-display: ui-serif, Georgia, "Times New Roman", serif; /* TBD: pending brandbook typeface decision */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.8rem + 1.5vw, 3rem);
  --step-4:  clamp(2.8rem, 2.2rem + 3vw, 4.5rem);

  /* Spacing scale — generous by default; wide breathing room around blocks
     of text is a deliberate cognitive-load reduction, not just aesthetics. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  --header-h: 4.5rem;          /* fixed (non-fluid) header height — lets the hero calc a precise
                                  100svh-minus-header fill that's consistent at any viewport size. */
  --radius: 2px;               /* sharp, not soft — matches "modern tech-forward, sharper type" direction */
  --max-width: 72rem;
  --border-hairline: 1px solid var(--color-border);
}

/* Dark variant, opt-in via [data-theme="dark"] (no toggle wired up yet — see
   DEPENDENCY_MATRIX.md backlog). This was the site's original default theme
   (pre-Aug-2026 redesign); kept as tokens in case a dark mode toggle is
   built later, but nothing on the site currently applies this attribute. */
[data-theme="dark"] {
  --color-bg: #0A0B0D;
  --color-surface: #15171B;
  --color-surface-raised: #1D2025;
  --color-border: #2A2D33;
  --color-text: #F2F0EC;
  --color-text-muted: #9B968E;
  --color-accent: #E8A33D;
  --color-accent-strong: #F5B85A;
}