/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — design system for "Log of Holding"
   Faithful to the original parchment & gold identity, with structured scales.
   Every original variable name is preserved verbatim so existing references
   keep resolving. Breakpoints (used in layout.css @media): 600px, 1024px.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core surfaces & ink (original palette, preserved) ────────────────────── */
  --bg:        #0c0a06;
  --bg2:       #110e08;
  --bg3:       #181208;
  --panel:     #1a1508;
  --parchment: #211c0f;
  --text:      #e8dcc0;
  --muted:     #8a7d60;

  /* Refinement layer (new, additive) */
  --ink:          #14100a;            /* deepest text-on-gold */
  --surface-1:    var(--bg2);
  --surface-2:    var(--bg3);
  --surface-3:    var(--panel);
  --hairline:     rgba(212,168,75,0.15);
  --hairline-strong: rgba(110,85,32,0.40);
  --zebra:        rgba(255,240,180,0.018);

  /* ── Gold accents ────────────────────────────────────────────────────────── */
  --gold:        #d4a84b;
  --gold-dim:    #6e5520;
  --gold-glow:   rgba(212,168,75,0.18);
  --gold-bright: #e8c46a;             /* hover / active highlight (new) */
  --danger:      #e87d7d;
  --danger-dim:  #8b2020;
  --success:     #a0f0c0;
  --success-dim: #4a9f70;

  /* ── Category colors (original, preserved) ───────────────────────────────── */
  --spell:     #6b2fa0;
  --condition: #8b1a1a;
  --status:    #8b5a00;
  --disease:   #4a6a2a;
  --action:    #0f3040;
  --rule:      #2a3a6a;
  --sense:     #3a2a6a;
  --skill:     #1a5c40;
  --feat:      #7a5a1a;
  --optfeature:#5a2a6a;
  --item:      #6a4a2a;
  --custom:    #1a5c40;
  --ability:   #3a4a5a;
  --damage:    #7a3a2a;

  /* Category text/border tints — promoted from inline hex (single source) */
  --spell-tint:     #e0b8ff;
  --condition-tint: #ffb8b8;
  --status-tint:    #ffe0a0;
  --disease-tint:   #d0f0a0;
  --action-tint:    #88d4f0;
  --rule-tint:      #b8c8ff;
  --sense-tint:     #c8b8ff;
  --skill-tint:     #a0f0c0;
  --feat-tint:      #ffe0a0;
  --optfeature-tint:#e0c8f8;
  --item-tint:      #f0d8b0;
  --custom-tint:    #a0f0c0;
  --ability-tint:   #c8d8e8;
  --damage-tint:    #ffc8a0;

  /* Edition badges */
  --ed-2024-bg: #2a7a4a;  --ed-2024-tint: #c0f0d0;
  --ed-2014-bg: #5a5060;  --ed-2014-tint: #d8d0e0;

  /* ── Spacing scale ───────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --font-display: 'Cinzel', serif;
  --font-body:    Georgia, 'Times New Roman', serif;          /* legible body + descriptions */
  --font-fancy:   'IM Fell English', Georgia, serif;          /* atmospheric flourish only (upright, short lines) */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-md:   14px;
  --fs-base: 15px;
  --fs-lg:   1.1rem;
  --fs-xl:   1.6rem;

  --ls-label: 2px;     /* uppercase Cinzel labels */
  --ls-title: 3px;     /* brand / headings */

  /* ── Radii ───────────────────────────────────────────────────────────────── */
  --radius:      4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ── Elevation / shadows ─────────────────────────────────────────────────── */
  --shadow-sm:        0 4px 12px rgba(0,0,0,0.6);
  --shadow-md:        0 6px 20px rgba(0,0,0,0.7);
  --shadow-lg:        0 8px 48px rgba(0,0,0,0.88);
  --shadow-glow-gold: 0 0 8px rgba(212,168,75,0.25);
  --shadow-header:    0 2px 0 rgba(212,168,75,0.08), 0 4px 16px rgba(0,0,0,0.6);
  --shadow-panel:     0 4px 40px rgba(0,0,0,0.55), inset 0 0 80px rgba(0,0,0,0.18);
  --vignette:         inset 0 0 80px rgba(0,0,0,0.18);

  /* ── Z-index layers (formalized) ─────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-menu:     250;
  --z-dialog:   300;
  --z-toast:    400;
  --z-init:     9999;

  /* ── Motion ──────────────────────────────────────────────────────────────── */
  --dur-fast: 0.15s;
  --dur:      0.25s;
  --dur-slow: 0.7s;
  --ease:     ease;

  /* ── Touch target ────────────────────────────────────────────────────────── */
  --touch: 44px;

  /* ── Parchment grain (verbatim data-URI — %23 encoding is load-bearing) ──── */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}