/* ═══════════════════════════════════════════════════════════
   by SHANKS & SON — DESIGN TOKENS v1.0  ("Draftsman Classic")
   Drop-in replacement for the :root block in style.css.
   All ink tokens verified ≥ 4.5:1 (WCAG AA) on their surfaces.
═══════════════════════════════════════════════════════════ */
:root {
  /* ── Surfaces ─────────────────────────────── */
  --paper:        #F5F0E8;   /* primary light bg (was --bg) */
  --paper-2:      #EAE6DF;   /* secondary light bg (was --light) */
  --blueprint:    #1B2A3B;   /* dark section bg (was --slate) */
  --surface-raised: rgba(245, 240, 232, 0.78); /* cards on paper */

  /* ── Ink on paper ─────────────────────────── */
  --ink:          #1C1C1A;   /* headings, body            15.1:1 */
  --ink-2:        #2A2520;   /* outlines, hover fills            */
  --ink-muted:    #6B655C;   /* secondary text, labels     5.1:1 */
  --ink-faint:    #8A8278;   /* DECORATIVE ONLY (coords, hints)  */

  /* ── Ink on blueprint ─────────────────────── */
  --ink-inverse:        #FFFFFF;                  /* headings 14.6:1 */
  --ink-inverse-body:   rgba(255,255,255,0.72);   /* body      8.1:1 */
  --ink-inverse-muted:  rgba(255,255,255,0.55);   /* labels    5.5:1 */
  --ink-inverse-faint:  rgba(255,255,255,0.35);   /* DECORATIVE ONLY */
  --placeholder-inverse: rgba(255,255,255,0.38);

  /* ── Brand ────────────────────────────────── */
  --accent:       #3B4A3F;   /* forest — CTAs only (white text 9.4:1) */
  --white:        #FFFFFF;

  /* ── Lines ────────────────────────────────── */
  --border:          #CFC9C1;                 /* on paper */
  --border-inverse:  rgba(255,255,255,0.12);  /* on blueprint */
  --border-inverse-strong: rgba(255,255,255,0.28); /* focused inputs */
  --radius:       0;         /* square corners everywhere — deliberate */

  /* ── Typography ───────────────────────────── */
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'Space Mono', 'SF Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Type scale — nothing below 11px */
  --text-label:   0.6875rem;                    /* 11px — mono caps floor */
  --text-small:   0.8125rem;                    /* 13px — card copy       */
  --text-body-s:  0.875rem;                     /* 14px — step desc       */
  --text-body:    1rem;                         /* 16px                   */
  --text-lead:    clamp(1.0625rem, 1.4vw, 1.4rem);  /* italic payoffs    */
  --text-h3:      1.375rem;                     /* card/step titles       */
  --text-h2:      clamp(1.75rem, 3vw, 3rem);    /* section titles         */
  --text-hero:    clamp(2rem, 3.4vw, 3.25rem);  /* hero (mobile: 11vw)    */

  --leading-tight: 1.1;
  --leading-body:  1.7;
  --tracking-label: 0.14em;   /* mono caps */
  --tracking-tight: -0.02em;  /* serif display */

  /* ── Spacing (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-10: 2.5rem;  --space-12: 3rem;    --space-16: 4rem;
  --space-20: 5rem;    --space-28: 7rem;    /* section padding */

  /* ── Layout ───────────────────────────────── */
  --max:     1200px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --nav-h:   80px;   /* 96px ≥960px, 108px ≥1280px */

  /* ── Motion ───────────────────────────────── */
  --dur-fast:   150ms;   /* hovers */
  --dur-base:   300ms;   /* card reveals */
  --dur-slow:   720ms;   /* scroll reveals */
  --dur-draw:   1600ms;  /* SVG clip reveals */
  --ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-draw:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-nav:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Texture ──────────────────────────────── */
  --grid-light: radial-gradient(circle, rgba(42,37,32,0.11) 1px, transparent 1px);
  --grid-size-light: 22px 22px;
  --grid-dark:
    linear-gradient(rgba(245,240,232,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,240,232,0.06) 1px, transparent 1px);
  --grid-size: 34px 34px;

  /* ── Focus ────────────────────────────────── */
  --focus-ring: 2px solid var(--accent);
  --focus-ring-inverse: 2px solid rgba(255,255,255,0.85);
  --focus-offset: 3px;
}

/* Legacy aliases — keep old names working during migration */
:root {
  --bg:    var(--paper);
  --light: var(--paper-2);
  --slate: var(--blueprint);
  --dark:  var(--ink);
  --dark2: var(--ink-2);
  --muted: var(--ink-muted);
}

/* ── Global accessibility baseline ──────────── */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.on-blueprint :focus-visible,
#services :focus-visible, #work :focus-visible,
#contact :focus-visible, footer :focus-visible {
  outline: var(--focus-ring-inverse);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .hero-payoff-line, .hero-sub-payoff, .hero-actions {
    opacity: 1 !important; transform: none !important;
  }
  .ticker-track { transform: none !important; }
}