/* ============================================================
WIZARD — DESIGN TOKENS
Single source of truth. Do NOT put hex values anywhere else.
Colors sampled from /design/reference.png (Gemini concept art).
HOW TO USE IN THE REACT APP
---------------------------
This file must be 'd in index.html BEFORE the
Babel script block. CSS custom properties on :root are
readable from inline JSX styles like so:
The getTheme(tweaks) function should return a T object whose
values are 'var(--token-name)' strings, not raw hex.
============================================================ */
:root {
/* ---------- STONE WALL (page background) ---------- */
--stone-wall-darkest: #1a1514;
--stone-wall-dark: #2d2725;
--stone-wall-mid: #40322f;
--stone-wall-warm: #514338;
/* ---------- STONE TILES (category buttons, product cards, plaques) ---------- */
--stone-tile-light: #9e8c7c;
--stone-tile-mid: #8a7b6d;
--stone-tile-shadow: #615248;
--stone-tile-engrave: #3d3531;
/* ---------- STONE TILE VARIANTS (product thumbnails) ----------
These replace the current COLORS.strain / .tool / .promo arrays.
Each variant is a stone tile subtly tinted by its type. */
--tile-strain-light: #5a6a4c; /* mossy stone, for strain placeholders */
--tile-strain-mid: #3d4a33;
--tile-strain-deep: #1f2a1a;
--tile-tool-light: #7a6548; /* iron-stained stone, for tools */
--tile-tool-mid: #554230;
--tile-tool-deep: #2e2318;
--tile-promo-light: #8a3a3a; /* blood-stone, for promo placeholders */
--tile-promo-mid: #5a2525;
--tile-promo-deep: #2e1212;
/* ---------- PARCHMENT (speech bubble, description panel) ---------- */
--parchment-highlight: #e5d4b3;
--parchment: #d9c09b;
--parchment-shadow: #ae9a82;
--parchment-ink: #2b2420;
--parchment-ink-soft: #5a4a3c;
/* ---------- METAL (frames, brackets, rivets) ---------- */
--metal-dark: #2d2320;
--metal-mid: #4b3730;
--metal-highlight: #6a5345;
--metal-rivet: #2d2320;
/* ---------- BRASS (NUNTUI plaque, promo badge, active indicators) ---------- */
--brass-light: #d4a944; /* brighter than before — for active states */
--brass-mid: #9c7c54;
--brass-deep: #7b6146;
--brass-shadow: #4a3627;
/* ---------- RED (wizard robe, destructive actions) ---------- */
--accent-red: #a1272c;
--accent-red-deep: #743335;
--accent-red-dark: #4d2020;
/* ---------- AMBER GLOW (active/selected state, promo star) ---------- */
--glow-core: #fefebf;
--glow-warm: #d4a944;
--glow-outer: #7f5b49;
/* ---------- CHAT / INPUT SURFACES ---------- */
--panel-interior: #332e2a;
--input-bg: #403833;
--input-text: #877767;
--text-on-dark: #d9c09b;
--text-on-dark-dim: #877767;
/* ---------- MODAL OVERLAY ---------- */
--modal-backdrop: rgba(15, 10, 8, 0.75);
/* ============================================================
TYPOGRAPHY
Load in :
============================================================ */
--font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
--font-body: 'IM Fell DW Pica', 'Garamond', Georgia, serif;
--font-ui: 'Cinzel', Georgia, serif;
--fs-title: clamp(1.25rem, 1.4vw, 1.6rem); /* WIZARD in navbar */
--fs-heading: clamp(1rem, 1.2vw, 1.25rem); /* Category titles */
--fs-body: clamp(0.95rem, 1.1vw, 1.15rem); /* speech bubble, description */
--fs-label: clamp(0.7rem, 0.85vw, 0.9rem); /* product card label, pill */
--fs-meta: clamp(0.65rem, 0.75vw, 0.8rem); /* THC %, item count */
--ls-display: 0.08em;
--ls-category: 0.12em;
--ls-tight: 0.04em;
/* ---------- SPACING (8pt grid) ---------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
/* ---------- RADII ---------- */
--r-stone: 2px;
--r-metal: 4px;
--r-card: 8px; /* product cards get slightly more radius than raw stone */
--r-pill: 999px;
/* ---------- SHADOWS ---------- */
--shadow-inset-stone:
inset 0 2px 4px rgba(255,220,180,0.08),
inset 0 -3px 6px rgba(0,0,0,0.5);
--shadow-tile-raised:
0 2px 0 var(--stone-tile-shadow),
0 4px 8px rgba(0,0,0,0.6);
--shadow-parchment:
0 2px 6px rgba(0,0,0,0.4),
inset 0 0 20px rgba(139,100,60,0.15);
--shadow-glow-active:
0 0 20px var(--glow-warm),
0 0 40px var(--glow-warm),
0 0 60px rgba(212,169,68,0.3);
--shadow-promo-star:
0 0 8px var(--glow-warm),
0 0 2px var(--glow-core);
/* ---------- TRANSITIONS ---------- */
--t-fast: 0.12s ease-out;
--t-base: 0.2s ease-out;
--t-slow: 0.35s ease-out;
}