/* ============================================================
   pf-dnd shared design tokens
   Generated from docs/STYLE-GUIDE.md (task-52)
   Migrate hardcoded values in templates to var(--token-name).
   ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --bg-parchment:       #f1e4c3;  /* page bg — the warm cream */
  --bg-parchment-warm:  #e8d5a3;  /* gradient top — tv top-strip, lobby */
  --bg-parchment-dark:  #e3d2a4;  /* gradient bottom — col-header, scene-head */
  --bg-paper:           #faf3df;  /* card surface — kid-card, modal, lobby-card */
  --bg-panel:           #fff8e3;  /* nested panel — turn-order, kid-card inner */

  /* ---------- Ink (text) ---------- */
  --ink:        #2b1d0e;   /* body text */
  --ink-soft:   #6b4f2c;   /* h-tag context, labels */
  --ink-muted:  #7a5f38;   /* helper text, hint copy, counts (darkened to pass WCAG AA on parchment) */

  /* ---------- Lines + frames ---------- */
  --rule:        #c8b07a;  /* hairline border, kid-card outline */
  --rule-soft:   #d9c596;  /* dashed signin separator, RE section divider */
  --rule-paper:  #c9b78c;  /* parchment-paper-edge — used inside stat sheets */
  --frame:       #6b4a1f;  /* heavy double border — character sheets, lobby QR */

  /* ---------- Accent (the system red) ---------- */
  --accent:       #8a2a1a;  /* primary CTAs, headings */
  --accent-hot:   #c0381e;  /* hover, danger buttons */
  --accent-soft:  #efd2cb;  /* tinted highlight — selected scene, drag-over */
  --accent-deep:  #6b1e1e;  /* stat-sheet header gradient only */

  /* ---------- Gold / luxe ---------- */
  --gold:         #b88a26;  /* top-banner border, card-recommended border */
  --gold-bright:  #e0b048;  /* small-caps top-banner title, badges */
  --turn-glow:    #ffd874;  /* TV-only — pulse animation accent */

  /* ---------- Mahogany (banner / header gradient — the deep brown top-strip) ---------- */
  --mahogany:        #2a1808;  /* gradient bottom; recommended-badge text; theme-color */
  --mahogany-light:  #3b2614;  /* gradient top */

  /* ---------- Status: HP ---------- */
  --hp-green:     #4a7a2a;  /* DM screen, full saturation */
  --hp-amber:     #9a6410;  /* darkened so white HP text stays legible (WCAG) */
  --hp-red:       #a02818;  /* DM screen, full saturation */
  --hp-red-soft:  #8b3a3a;  /* TV — muted brick, kid-facing accessibility */

  /* ---------- Status: misc ---------- */
  --good:         #4a7a2a;  /* success toast, hint.success */
  --calm-border:  #2e6fb8;  /* TV — sensory-calm "current turn" border */

  /* ---------- Geometry ---------- */
  --radius-sm:    4px;     /* topbar button, scene-list-item, status pill */
  --radius-md:    8px;     /* modal, kid-card outer, lobby-card */
  --radius-input: 10px;    /* form inputs, code-input */
  --radius-card:  14px;    /* big cards (home cards, dm-stat-sheet, kid-card) */
  --radius-pill:  999px;   /* chips, conn-chip, mm-roster-item */

  /* ---------- Elevation (shadows) ---------- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.18);
  --shadow-md:    0 3px 8px rgba(0,0,0,.22);
  --shadow-card:  0 3px 12px rgba(0,0,0,.13);
  --shadow-elev:  0 8px 24px rgba(0,0,0,.40);   /* toast, popovers */
  --shadow-modal: 0 12px 40px rgba(0,0,0,.50);  /* modal-backdrop content */

  /* ---------- Motion ---------- */
  --t-fast: 120ms;   /* button hover, hp-btn:active scale */
  --t-mid:  220ms;   /* card transform, hp-bar width */
  --t-slow: 400ms;   /* monster-panel slide-in, scene fade */

  /* ---------- Typography ---------- */
  --font-body:    "Georgia", "Cambria", "Times New Roman", serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
                  Palatino, Georgia, serif;
  --font-mono:    "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* ---------- Kid PWA only (play.html) — dark mode override ---------- */
  --pw-bg-primary:  #0a0a0a;
  --pw-bg-card:     #161616;
  --pw-bg-elev:     #1f1f1f;
  --pw-border:      #2a2a2a;
  --pw-text:        #f1f1f1;
  --pw-text-muted:  #b0b0b0;
  --pw-accent:      #0090e2;
  --pw-accent-glow: rgba(0, 144, 226, 0.45);
  --pw-good:        #2ecc71;
  --pw-bad:         #e74c3c;
  --pw-warn:        #f5a623;
  --pw-hp-fill:     linear-gradient(90deg, #e74c3c 0%, #f5a623 55%, #2ecc71 100%);
  --pw-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale (v2 — Round 4) ----------
     Use these for new work. Existing template literals can stay as raw px
     until next edit; check the STYLE-GUIDE type-scale table for the matching
     step. */
  --size-xs:   11px;   /* caption, count badges, micro-labels */
  --size-sm:   13px;   /* helper text, hint copy, kid-sub */
  --size-base: 15px;   /* body, kid-name, dm-notes */
  --size-lg:   17px;   /* h2 / section title */
  --size-xl:   22px;   /* h1 / card title / modal h1 */
  --size-2xl:  28px;   /* stat-sheet h1, dm wake screen */
  --size-3xl:  clamp(36px, 7vmin, 72px); /* TV waiting/game-over display */

  /* ---------- Spacing scale (v2 — Round 4) ----------
     Pick from this set instead of inventing in-betweens. Audit found dm.html
     uses every step from 4-32, plus 48/64 for hero margins. The 2px step
     exists for tight-pack rail gaps (tv slots, hp-bar tick marks) — most
     places should snap to step 1+. See STYLE-GUIDE "Spacing scale" table for
     the translation of legacy 5/6/7/9/11/13/17 values. */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Z-index scale (v2 — Round 4) ----------
     Resolves the 28+ ad-hoc z-index values across the 4 templates. Use the
     CLOSEST scale step rather than inventing a new tier; the gaps between
     steps are deliberate so a future layer can slot in without renumbering.

     Stack order:
       base    (0)    — flat content
       tokens  (10)   — battle-map tokens, slot cards
       fx      (22)   — particle/confetti layer, behind monster-panel
       panel   (25)   — monster-panel, drawer, RE panel
       sticky  (200)  — start-game-banner, fixed action bars
       modal   (1000) — modal-backdrop (4-template default)
       drop    (1100) — dropdown menu inside a modal
       toast   (1500) — toast overlay (must beat every modal)
       hard    (9000) — full-screen confirm/lock screens, "you died"
       boot    (10500)— DM splash + cinematic intro overlay */
  --z-base:     0;
  --z-tokens:   10;
  --z-fx:       22;
  --z-panel:    25;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-dropdown: 1100;
  --z-toast:    1500;
  --z-hard:     9000;
  --z-boot:     10500;

  /* ---------- Easing (v2 — Round 4) ----------
     Default `ease`/`linear` look mechanical on the parchment surfaces. The
     custom out-curve is what makes the HP bar deplete feel like a sword
     stroke instead of a progress meter. Use --ease-out for entrances,
     --ease-in for exits, --ease-bounce for the few playful flourishes (kid
     wake-up, item-granted toast). */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}