/* ============================================================
   jeradhill.com — DESIGN TOKENS
   Black-and-white editorial system (the "Jerad Hill Design System"),
   ported from the build.jeradhill.com theme with this site's own
   accent: "airfield teal" #215a6b, used sparingly (links, active nav,
   focus, calendar highlight). Buttons stay solid black.
   ============================================================ */

:root {
  /* Neutral ramp */
  --white:      #ffffff;
  --n50:        #f6f6f5;
  --n100:       #efefee;
  --n200:       #e4e4e2;
  --n300:       #d2d2cf;
  --n400:       #a8a8a4;
  --n500:       #7c7c78;
  --n600:       #565654;
  --n700:       #3a3a38;
  --n800:       #242423;
  --n900:       #141413;
  --ink:        #0b0b0a;
  --black:      #000000;

  /* Accent — airfield teal (sparingly) */
  --accent:       #215a6b;
  --accent-hover: #17444f;
  --accent-tint:  #eaf1f3;

  /* Semantic surfaces */
  --surface-page:    var(--white);
  --surface-muted:   var(--n50);
  --surface-card:    var(--white);
  --surface-inverse: var(--ink);

  /* Semantic text */
  --text-primary:   var(--ink);
  --text-secondary: var(--n600);
  --text-muted:     var(--n500);
  --text-inverse:   var(--white);
  --text-on-inverse-muted: var(--n400);

  /* Borders */
  --border:        var(--n200);
  --border-strong: var(--n300);
  --border-ink:    var(--ink);

  /* Interactive — buttons stay solid black; accent is for links/nav/focus */
  --action:          var(--ink);
  --action-hover:    var(--black);
  --action-contrast: var(--white);
  --link:            var(--accent);
  --link-hover:      var(--accent-hover);

  /* Focus ring — accent at ~40% */
  --ring: color-mix(in srgb, var(--accent) 40%, transparent);

  /* Status (desaturated) */
  --success: #2e7d5b;
  --warning: #b0781f;
  --danger:  #b23b32;

  /* Typography */
  --font-sans:    'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-sans);
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extrabold:800;
  --fw-black:   900;

  --fs-eyebrow: 12px;
  --fs-caption: 13px;
  --fs-small:   14px;
  --fs-body:    16px;
  --fs-lead:    18px;
  --fs-h6:      18px;
  --fs-h5:      22px;
  --fs-h4:      28px;
  --fs-h3:      30px;
  --fs-h2:      36px;
  --fs-h1:      46px;
  --fs-display: 64px;

  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-heading: 1.1;
  --lh-body:    1.6;
  --lh-relaxed: 1.75;

  --ls-display: -0.02em;
  --ls-heading: 0.01em;
  --ls-body:    0em;
  --ls-eyebrow: 0.18em;
  --ls-wordmark:0.24em;

  /* Spacing (4px grid) */
  --space-1:  4px;  --space-2:  8px;  --space-3:  12px; --space-4:  16px;
  --space-5:  20px; --space-6:  24px; --space-8:  32px; --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;

  --container:        1120px;
  --container-narrow: 820px;
  --gutter:           24px;
  --section-y:        84px;

  /* Radius / border / shadow / motion */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-pill: 999px;
  --radius-full: 50%;

  --border-width: 1px;
  --border-width-strong: 2px;

  --shadow-xs: 0 1px 2px rgba(11,11,10,0.05);
  --shadow-sm: 0 1px 3px rgba(11,11,10,0.06), 0 1px 2px rgba(11,11,10,0.04);
  --shadow-md: 0 4px 14px rgba(11,11,10,0.08), 0 2px 4px rgba(11,11,10,0.04);
  --shadow-lg: 0 12px 34px rgba(11,11,10,0.12), 0 4px 8px rgba(11,11,10,0.05);
  --shadow-ring: 0 0 0 3px var(--ring);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 150ms;
  --dur-slow: 300ms;
}

@media (max-width: 780px) {
  :root {
    --fs-display: 44px;
    --fs-h1:      36px;
    --fs-h2:      30px;
    --fs-h3:      26px;
    --fs-h4:      22px;
    --section-y:  56px;
    --gutter:     20px;
  }
}