/* ════════════════════════════════════════════════════════════════════
   bdyna-tokens.css — the single source of every reused visual value.
   Layer 1 of 5. Load first; everything else resolves against it.

   WHY THIS FILE EXISTS
   The audit found body text alternating between 12px and 16px, hero
   headings between 52px and 80px, and 36,000–67,000 characters of inline
   CSS per page. None of that is a styling problem — it is the absence of
   a place to put a number once.

   TOKENS ONLY. No selectors beyond :root and the two theme scopes. If a
   rule styles something, it belongs in a later layer.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Brand ──────────────────────────────────────────────────── */
  --bd-gold:#FFD700;
  --bd-gold-hover:#E6C200;
  --bd-gold-ink:#111111;          /* text ON gold — 11.6:1, AA at any size */
  --bd-green:#0a3d33;
  --bd-green-2:#0f4a3d;
  --bd-green-ink:#ffffff;

  /* ── Neutrals · dark surfaces (the default page theme) ───────── */
  --bd-ink:#0a0a0c;               /* page */
  --bd-surface:#131418;           /* raised */
  --bd-surface-2:#1b1d22;         /* raised twice */
  --bd-line:#2a2d34;
  --bd-line-soft:#22252b;

  /* ── Neutrals · light surfaces ──────────────────────────────── */
  --bd-paper:#ffffff;
  --bd-paper-2:#f5f5f7;
  --bd-line-light:#e6e6ea;

  /* ── Text ───────────────────────────────────────────────────── */
  --bd-text:#eceef1;              /* on --bd-ink — 15.8:1 */
  --bd-text-muted:#9aa0aa;        /* on --bd-ink —  6.4:1, AA normal text */
  --bd-text-faint:#6b7280;        /* on --bd-ink —  3.4:1, LARGE TEXT AND
                                     NON-ESSENTIAL METADATA ONLY. Never body. */
  --bd-text-dark:#0b0b0c;         /* on --bd-paper — 18.1:1 */
  --bd-text-dark-muted:#5d6270;   /* on --bd-paper —  6.2:1, AA normal text */

  /* ── Status ─────────────────────────────────────────────────── */
  --bd-ok:#3f9e6a;        --bd-ok-bg:rgba(63,158,106,.12);   --bd-ok-line:rgba(63,158,106,.42);
  --bd-warn:#c98a00;      --bd-warn-bg:rgba(201,138,0,.12);  --bd-warn-line:rgba(201,138,0,.42);
  --bd-error:#d4564b;     --bd-error-bg:rgba(212,86,75,.12); --bd-error-line:rgba(212,86,75,.45);
  --bd-info:#5b8dd6;      --bd-info-bg:rgba(91,141,214,.12); --bd-info-line:rgba(91,141,214,.42);
  /* Status colours for LIGHT surfaces — the dark set fails contrast on white. */
  --bd-ok-dark:#1f6b42; --bd-warn-dark:#8a6b00; --bd-error-dark:#a5342a; --bd-info-dark:#2f5f9e;

  /* ── Type ───────────────────────────────────────────────────── */
  --bd-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bd-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bd-w-normal:400; --bd-w-medium:500; --bd-w-semi:600;
  --bd-w-bold:700;   --bd-w-heavy:800;  --bd-w-black:900;

  /* Responsive scale. Nine steps, every one clamped, so a heading cannot
     land on an arbitrary size because a page carried unrelated CSS. */
  --bd-fs-display:clamp(40px,6.2vw,72px);
  --bd-fs-h1:clamp(32px,4.6vw,56px);
  --bd-fs-h2:clamp(24px,3.1vw,36px);
  --bd-fs-h3:clamp(19px,2.1vw,25px);
  --bd-fs-h4:clamp(16.5px,1.6vw,19px);
  --bd-fs-body-lg:17px;
  --bd-fs-body:16px;              /* the accessible floor for running text */
  --bd-fs-small:14px;
  --bd-fs-meta:12px;              /* labels and metadata only, never prose */

  --bd-lh-tight:1.06;  --bd-lh-snug:1.22;  --bd-lh-normal:1.5;  --bd-lh-relaxed:1.68;
  --bd-track-tight:-.03em; --bd-track-normal:0; --bd-track-wide:.18em;
  --bd-measure:68ch;              /* paragraph width — under 80 characters */
  --bd-measure-narrow:54ch;

  /* ── Spacing · a 4px base, so every gap is a multiple ────────── */
  --bd-s-1:4px;  --bd-s-2:8px;  --bd-s-3:12px; --bd-s-4:16px; --bd-s-5:20px;
  --bd-s-6:24px; --bd-s-8:32px; --bd-s-10:40px; --bd-s-12:48px;
  --bd-s-16:64px; --bd-s-20:80px; --bd-s-24:96px;
  --bd-section-y:clamp(48px,7vw,88px);
  --bd-page-x:clamp(20px,5vw,64px);

  /* ── Containers ─────────────────────────────────────────────── */
  --bd-container:1200px;
  --bd-container-narrow:960px;
  --bd-container-wide:1440px;
  --bd-gap:24px; --bd-gap-sm:16px; --bd-gap-lg:40px;

  /* ── Radii, shadows, chrome ─────────────────────────────────── */
  --bd-r-sm:6px; --bd-r:10px; --bd-r-lg:16px; --bd-r-pill:999px;
  --bd-shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --bd-shadow:0 8px 24px rgba(0,0,0,.34);
  --bd-shadow-lg:0 24px 60px rgba(0,0,0,.45);
  --bd-header-h:72px; --bd-header-h-mobile:60px;
  --bd-hero-h:72vh; --bd-hero-h-min:78vh; --bd-hero-h-max:620px;

  /* ── Layers. Named, so nothing reaches for z-index:99999. ───── */
  --bd-z-base:1; --bd-z-raised:10; --bd-z-sticky:100; --bd-z-header:200;
  --bd-z-drawer:300; --bd-z-overlay:400; --bd-z-modal:500; --bd-z-toast:600;
  --bd-z-skip:10000;

  /* ── Motion. Honoured or disabled; never decorative. ────────── */
  --bd-t-fast:120ms; --bd-t:180ms; --bd-t-slow:320ms;
  --bd-ease:cubic-bezier(.4,0,.2,1);

  /* ── Focus. One ring, everywhere, always visible. ───────────── */
  --bd-focus-w:3px; --bd-focus-color:var(--bd-gold); --bd-focus-offset:3px;

  /* ── Touch targets — WCAG 2.2 AA minimum is 24px; 44px is the
        comfortable target and what components use. ─────────────── */
  --bd-touch-min:44px;

  /* ── Resolved theme slots. A page or section sets these, and every
        component reads them, so one attribute re-themes a whole block. */
  --bd-bg:var(--bd-ink);
  --bd-fg:var(--bd-text);
  --bd-fg-muted:var(--bd-text-muted);
  --bd-border:var(--bd-line);
  --bd-card:var(--bd-surface);
}

/* Breakpoints cannot be custom properties in media queries, so they are
   documented here and used literally in bdyna-responsive.css:
     sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1536px */

/* ── Theme scopes ──────────────────────────────────────────────
   [data-bd-theme="light"] on any element re-points the slots. This is how
   a light section lives inside a dark page without redefining components. */
[data-bd-theme="light"]{
  --bd-bg:var(--bd-paper);
  --bd-fg:var(--bd-text-dark);
  --bd-fg-muted:var(--bd-text-dark-muted);
  --bd-border:var(--bd-line-light);
  --bd-card:var(--bd-paper);
  --bd-ok:var(--bd-ok-dark); --bd-warn:var(--bd-warn-dark);
  --bd-error:var(--bd-error-dark); --bd-info:var(--bd-info-dark);
  --bd-focus-color:#7a5c00;     /* gold on white is 1.4:1 — unusable */
}
[data-bd-theme="dark"]{
  --bd-bg:var(--bd-ink);
  --bd-fg:var(--bd-text);
  --bd-fg-muted:var(--bd-text-muted);
  --bd-border:var(--bd-line);
  --bd-card:var(--bd-surface);
  --bd-focus-color:var(--bd-gold);
}

/* Properties with their own identity override the BRAND tokens only. Their
   spacing, type scale, focus and status colours stay shared — that is the
   line between "own look" and "own rules". */
[data-bd-brand="roar"]{ --bd-gold:#FFD700; --bd-green:#111; }
[data-bd-brand="designpoise"]{ --bd-gold:#c8a04a; --bd-green:#14202b; }
[data-bd-brand="redii"]{ --bd-gold:#1f9ad6; --bd-gold-ink:#ffffff; --bd-green:#0d2436; }
[data-bd-brand="guardian"]{ --bd-gold:#4ea8de; --bd-gold-ink:#04121d; --bd-green:#0b1a26; }
[data-bd-brand="dynaforges"]{ --bd-gold:#ff7a29; --bd-gold-ink:#160800; --bd-green:#1a0f06; }