/* ==========================================================================
   It’s Fully Online — Design Tokens
   Bench-dark: graphite surfaces with a blue-green cast (the colour of a
   lit instrument panel, fitting for tools that run on your own machine),
   one signal-vermilion accent shared with the book cover art so the site
   and its publications read as one brand. No gradients, no glass.
   Borders do the work; accent is spent only on action and focus.
   ========================================================================== */

:root {
  /* ── Surfaces (near-black) ───────────────────────────────────────── */
  --bg:           #0a0e10;   /* base background */
  --bg-1:         #0f1517;   /* slight lift */
  --bg-2:         #141b1e;   /* card / panel */
  --bg-3:         #1b2327;   /* pressed / hover bg */
  --bg-4:         #232d32;   /* strongest surface (used sparingly) */

  /* ── Ink (text) ───────────────────────────────────────────────────── */
  --ink-1:        #eef1f0;   /* primary text */
  --ink-2:        #aab4b6;   /* secondary */
  --ink-3:        #8a9598;   /* tertiary / meta (WCAG AA on --bg: 6:1) */
  --ink-4:        #707b7e;   /* muted / placeholders (sparingly) */
  --ink-inverse:  #14100f;

  /* ── Accent (single, restrained, cool) ────────────────────────────── */
  --accent:       #ff6a45;   /* signal vermilion (7.2:1 on --bg) */
  --accent-soft:  #e85a37;   /* pressed / hover */
  --accent-fade:  rgba(255, 106, 69, 0.09);
  --accent-line:  rgba(255, 106, 69, 0.34);
  --accent-glow:  rgba(255, 106, 69, 0.0);

  /* ── Status (muted, on-dark) ─────────────────────────────────────── */
  --ok:           #6fd0a0;
  --ok-soft:      rgba(125, 186, 154, 0.10);
  --warn:         #c8a96a;
  --warn-soft:    rgba(200, 169, 106, 0.10);
  --err:          #c87a7a;
  --err-soft:     rgba(200, 122, 122, 0.10);

  /* ── Borders (very subtle on dark) ───────────────────────────────── */
  --line-1:       rgba(214, 238, 240, 0.08);
  --line-2:       rgba(214, 238, 240, 0.14);
  --line-3:       rgba(214, 238, 240, 0.24);

  /* ── Spacing (4px scale) ──────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* ── Radius (small, restrained) ──────────────────────────────────── */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-5: 20px;
  --r-6: 28px;
  --r-full: 999px;

  /* ── Type scale (fluid) ───────────────────────────────────────────── */
  --t-display:  clamp(3rem, 7.6vw, 6rem);
  --t-hero:     clamp(2.0rem, 4.6vw, 3.4rem);
  --t-h1:       clamp(1.7rem, 3vw, 2.4rem);
  --t-h2:       clamp(1.35rem, 2vw, 1.7rem);
  --t-h3:       clamp(1.1rem, 1.4vw, 1.25rem);
  --t-h4:       1.0rem;
  --t-body:     1.0rem;
  --t-small:    0.9375rem;
  --t-micro:    0.8125rem;
  --t-tag:      0.6875rem;

  /* ── Font families (no serif) ─────────────────────────────────────── */
  --font-sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Fira Code", "Consolas", monospace;
  --font-display: var(--font-sans);
  --stretch-display: 74%;   /* Archivo width axis: heavy condensed, echoes the book cover */

  /* ── Line heights ─────────────────────────────────────────────────── */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  /* ── Letter spacing ───────────────────────────────────────────────── */
  --ls-tight:   -0.035em;
  --ls-snug:    -0.018em;
  --ls-base:    0;
  --ls-wide:    0.02em;
  --ls-tag:     0.10em;
  --ls-display: -0.01em;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:   140ms;
  --d-base:   220ms;
  --d-slow:   380ms;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --content-max:    1080px;
  --content-narrow: 680px;
  --gutter:         clamp(20px, 4vw, 32px);
  --header-height:  56px;

  /* ── Backward-compatible aliases (for existing pages) ─────────────── */
  --paper:            var(--bg);
  --paper-1:          var(--bg-1);
  --paper-2:          var(--bg-2);
  --paper-3:          var(--bg-3);
  --paper-deep:       var(--bg-4);
  --paper-video-overlay: rgba(0, 0, 0, 0.6);

  --bg-primary:     var(--bg);
  --bg-secondary:   var(--bg-1);
  --bg-tertiary:    var(--bg-3);
  --bg-elevated:    var(--bg-2);
  --bg-inset:       var(--bg-4);
  --text-primary:   var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-tertiary:  var(--ink-3);
  --text-inverse:   var(--ink-inverse);
  --accent-subtle:  var(--accent-fade);
  --accent-border:  var(--accent-line);
  --border:         var(--line-1);
  --border-hover:   var(--line-2);
  --border-strong:  var(--line-3);
  --shadow-sm:      none;
  --shadow-md:      none;
  --shadow-lg:      none;
  --radius-sm:      var(--r-1);
  --radius-md:      var(--r-2);
  --radius-lg:      var(--r-3);
  --radius-xl:      var(--r-4);
  --radius-full:    var(--r-full);
  --transition-fast: var(--d-fast) var(--ease);
  --transition-base: var(--d-base) var(--ease);
  --transition-slow: var(--d-slow) var(--ease);

  /* ── Icon system ──────────────────────────────────────────────────── */
  --icon-size:        18px;
  --icon-size-sm:     14px;
  --icon-size-lg:     22px;
  --icon-stroke:      1.75;
  --icon-stroke-heavy: 2.25;
}

/* ── Global focus ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* ── Selection ─────────────────────────────────────────────────────── */
::selection {
  background: var(--accent-fade);
  color: var(--ink-1);
}

/* ── Print ─────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; }
}

/* ── Display type: heavy-condensed Archivo for page titles ──────────── */
h1, .hero-title, .directory-head h2, .how h2, .promise h2, .tool-h1 {
  font-stretch: var(--stretch-display);
  font-weight: 800;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--ink-inverse); }