/* Watchdog v2 — refined tokens (primary brand, production-quality surfaces) */
:root {
  --wd-bg-deep: #0a0a0c;
  --wd-surface: #121214;
  --wd-surface-raised: #1a1a1e;
  --wd-ink-on-dark: #f4f4f5;
  --wd-muted-on-dark: #b4b4bd;
  --wd-accent: #fff200;
  --wd-accent-soft: rgba(255, 242, 0, 0.14);
  --wd-accent-hover: #ebe213;
  --wd-accent-ink: #0a0a0b;
  --wd-line-on-dark: rgba(255, 255, 255, 0.08);
  --wd-line-accent: rgba(255, 242, 0, 0.28);
  --wd-charcoal: #27272a;
  /* Trust navy (ui-ux-pro-max enterprise palette) — depth, not flat grey */
  --wd-navy: #0f172a;
  --wd-navy-mid: #1e3a5f;

  /* Light page + cards (WCAG-friendly body text) */
  --color-bg: #f1f5f9;
  --color-bg-wash: linear-gradient(165deg, #f8fafc 0%, #eef2f7 42%, #e8edf4 72%, #f4f7fb 100%);
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #eef2f7;
  /* Body / muted: meet 4.5:1 on white for typical body sizes (ui-ux checklist) */
  --color-ink: #0f172a;
  --color-ink-muted: #475569;
  --color-ink-soft: #64748b;
  --color-line: #e2e8f0;
  --color-line-strong: #cbd5e1;

  --color-accent: var(--wd-accent);
  --color-accent-ink: var(--wd-accent-ink);
  --color-accent-soft: rgba(255, 242, 0, 0.22);
  --color-teal: var(--wd-charcoal);
  --color-teal-soft: #3f3f46;
  --color-hero-wash: var(--wd-bg-deep);

  /* Bebas = hero punch; Lexend = section authority; Source Sans 3 = readable body (skill pairing) */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-section: "Lexend", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --space-xs: 0.35rem;
  --space-sm: 0.65rem;
  --space-md: 1rem;
  --space-lg: 1.75rem;
  --space-xl: 2.75rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.07), 0 20px 50px rgba(15, 23, 42, 0.06);
  --shadow-lift: 0 16px 40px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-hero: 0 50px 100px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-card-inner: inset 0 1px 0 rgba(255, 255, 255, 0.92);

  --max-read: 48rem;
  --max-article: 56rem;
  --max-wide: 74rem;
  --header-h: 4.25rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.22s;
}