/* =============================================================
   TOKENS.CSS — Block Library
   Fallback token definitions. Loaded FIRST, before any theme.
   Provides safe defaults so no token ever resolves to blank.

   TOKEN OWNERSHIP MAP
   ─────────────────────────────────────────────────────────────
   tokens.css (this file)
     └─ fallback values for ALL tokens
        themes override colors, radius, shadows
        fonts override typography
        surfaces bridge theme→block

   theme-*.css     → --accent-*, --bg-*, --text-*, --border-*,
                      --gradient-*, --pattern-line, --overlay-dark,
                      --tag-bg, --tag-text, --radius, --radius-lg,
                      --shadow, --shadow-md, --shadow-lg

   font-*.css      → --font-*, --weight-*, --flair-style, --ls-display

   surfaces.css    → --surface-* (derived from theme tokens per surface class)
                      No hardcoded colors — reads only from theme tokens.

   buttons.css     → .btn + all .btn-* variants
                      Reads --font-*, --radius, --accent-*, --surface-*

   reset.css       → box-sizing, body base, img, a, button

   typography.css  → .t-display, .t-heading, .t-flair, .t-body, .t-ui, .t-label

   utilities.css   → .card, .section, .tag, .section-header, .eyebrow, .divider, etc.

   css/blocks/*.css → per-category block styles (heroes, galleries, etc.)

   library-chrome.css → switcher + topbar + label bars — NEVER ships in client output.
                        Uses hardcoded neutrals, not theme tokens.

   LOAD ORDER (per page)
   ─────────────────────────────────────────────────────────────
   1. tokens.css           ← fallbacks
   2. theme-*.css          ← resolves --accent-*, --bg-*, --text-*, --radius, --shadow-*
   3. font-*.css           ← resolves --font-*, --weight-*, --ls-display
   4. reset.css            ← base element styles
   5. surfaces.css         ← resolves --surface-* from theme tokens
   6. typography.css       ← .t-* classes
   7. buttons.css          ← .btn classes
   8. utilities.css        ← .card, .section, .tag, etc.
   9. css/blocks/*.css     ← only what the page needs
  10. library-chrome.css   ← dev UI only, never in output
   ============================================================= */

:root {
  /* ── Accent (theme owns these) ──────────────────────────── */
  --accent:              #555;
  --accent-hover:        #444;
  --accent-text:         #fff;
  --accent-shadow:       rgba(0,0,0,0.20);
  --accent-subtle:       rgba(0,0,0,0.08);

  /* ── Backgrounds ────────────────────────────────────────── */
  --bg-page:             #ffffff;
  --bg-mid:              #f5f5f5;
  --bg-surface:          #eeeeee;
  --bg-dark:             #111111;
  --bg-card:             #ffffff;
  --bg-card-dark:        rgba(255,255,255,0.06);
  --bg-hover:            #eeeeee;

  /* ── Text ───────────────────────────────────────────────── */
  --text-primary:        #111111;
  --text-secondary:      #444444;
  --text-muted:          #888888;
  --text-ghost:          rgba(0,0,0,0.05);
  --text-inverse:        #f5f5f5;
  --text-inverse-muted:  rgba(245,245,245,0.60);

  /* ── Borders ────────────────────────────────────────────── */
  --border-subtle:       #dddddd;
  --border-strong:       #111111;
  --border-inverse:      rgba(245,245,245,0.12);

  /* ── Gradients ──────────────────────────────────────────── */
  --gradient-a:          #555555;
  --gradient-b:          #222222;

  /* ── Shadows (theme overrides with color-matched values) ── */
  --shadow:              0 2px 16px rgba(0,0,0,0.10);
  --shadow-md:           0 6px 32px rgba(0,0,0,0.14);
  --shadow-lg:           0 12px 48px rgba(0,0,0,0.20);

  /* ── Misc surface ───────────────────────────────────────── */
  --pattern-line:        rgba(255,255,255,0.018);
  --overlay-dark:        rgba(0,0,0,0.90);
  --tag-bg:              rgba(0,0,0,0.08);
  --tag-text:            #111111;

  /* ── Shape (theme overrides for personality) ────────────── */
  --radius:              4px;
  --radius-lg:           10px;

  /* ── Dark surface alpha values (theme overrides) ─────────
     Used by surfaces.css .surface-dark to avoid hardcoded rgba.
     Themes that want a different feel can override these.       */
  --dark-raised-alpha:   rgba(255,255,255,0.05);
  --dark-hover-alpha:    rgba(255,255,255,0.07);
  --dark-muted-alpha:    rgba(255,255,255,0.35);
  --dark-border-strong:  rgba(255,255,255,0.55);

  /* ── Typography (font files own these) ─────────────────── */
  --font-display:        system-ui, sans-serif;
  --font-flair:          system-ui, sans-serif;
  --font-body:           system-ui, sans-serif;
  --font-ui:             system-ui, sans-serif;

  --weight-display:      800;
  --weight-heading:      700;
  --weight-flair:        400;
  --flair-style:         normal;
  --ls-display:          -0.02em;
}