/* assets/css/reveel-theme.css — REVEEL's shared design tokens.
   2026-07-27: Jason moved the whole site off flat black+yellow-gold onto
   a warmer, deeper palette (his own brief, verbatim references: "Apple
   Watch Gold, not Las Vegas" for the gold; "an expensive kitchen island"
   for depth — cards cast soft shadows, buttons float, nothing is
   perfectly flat). Centralised HERE because before this, nearly every
   page redefined its own copy of --gold/--black/etc. locally — after the
   third straight round of "make the gold softer" in one session, that
   duplication was actively costing real time. Link this file, then use
   the tokens; don't redefine them per-page unless a page has a genuine,
   deliberate reason to differ (rare — ask before assuming one does).

   Where a page can't add a new <link> easily (e.g. no shared <head>
   partial), copy this whole block into that page's own <style> instead of
   guessing values by hand — keeps every page pulling the exact same
   numbers even without the shared file.
*/
:root{
  /* Deep espresso — replaces the old near-black (#050505/#0a0a0a/#0a0808
     etc., inconsistent across pages) EVERYWHERE dark is used: nav/header
     bars, and any other genuinely-dark surface. Warmer and softer than
     true black, per Jason's explicit "change all black to this colour". */
  --espresso:   #1F1B18;
  --espresso-2: #2A2420; /* one step lighter — dark surfaces layered on top of --espresso itself (e.g. a card sitting on a dark nav) */
  --espresso-3: #14110F; /* one step darker — deepest shadows/recesses, sparingly */

  /* Travertine/cream — the new base page colour (was pure black). Flat
     tone for now, not yet the literal stone-texture photo Jason was
     trialling — he's still looking for the right image; swap
     background-image in on top of --travertine once he has one, same
     technique tried on home.php 2026-07-27 (background:url(...) center
     center/cover no-repeat fixed). */
  --travertine: #F3EEE4;
  --ivory:      #FFFDF8; /* card/panel fill — sits slightly lighter than the page so cards visibly lift off it */
  --warm-white: #FFF9F0; /* product-box/tile fill — a hair warmer than ivory, for the "warm white product boxes" surfaces specifically */

  /* Text on light (travertine/ivory) surfaces */
  --ink:       #1F1B18; /* primary text — same value as --espresso, deliberately: one dark colour used as ink OR surface depending on context */
  --ink-soft:  #4A4038; /* secondary/body text */
  --ink-faint: #8A7F71; /* captions, postage/fine-print, disabled */

  /* Text on dark (espresso) surfaces — was --text before */
  --cream-text:  #F3EEE4;
  --cream-text-2:#B8AFA2;
  --cream-text-3:#7A6F62;

  /* Gold family — muted metallics, not saturated yellow-gold. Named after
     Jason's own three reference terms so the mapping stays obvious:
     champagne (lightest, for headings/shine on either surface), brass
     (the everyday accent — borders, icons, small text), bronze (deepest,
     for hover/pressed states and small-caps labels). */
  --champagne: #D9C7A8;
  --brass:     #B08D57;
  --bronze:    #8C6D4A;
  --bronze-deep:#6F5738;
  /* Back-compat aliases so existing rules that reference the OLD variable
     names (--gold/--gold-dark/--gold-shine/--gold-deep) keep working
     without a find-and-replace pass on every rule in every file — only
     these six lines needed to change to retheme a page that already used
     the old names correctly. */
  --gold:       var(--brass);
  --gold-dark:  var(--bronze);
  --gold-shine: var(--champagne);
  --gold-deep:  var(--bronze-deep);
  --gold-light: var(--champagne); /* a second pre-existing name for the same lightest role, found used (but never actually DEFINED anywhere) in home.php/order.html/card-builder.html/play/* — real latent bug predating this palette change, fixed here rather than at each call site */

  /* Depth — soft, warm-tinted shadows (never pure grey/black; a warm
     shadow reads as "sitting on wood/stone", a cold grey one reads as
     "cut out and pasted"). Three weights: sm for small floating chips/
     buttons, md for standard cards, lg for hero imagery/modals. */
  --shadow-sm: 0 1px 3px rgba(31,27,24,.10), 0 1px 2px rgba(31,27,24,.06);
  --shadow-md: 0 6px 16px rgba(31,27,24,.10), 0 2px 5px rgba(31,27,24,.07);
  --shadow-lg: 0 16px 40px rgba(31,27,24,.16), 0 4px 10px rgba(31,27,24,.08);
  /* Buttons specifically get a warm gold-tinted glow under them rather
     than a neutral shadow — reinforces the metal rather than looking like
     the button is just a flat rectangle with a generic drop-shadow. */
  --shadow-button: 0 3px 10px rgba(176,141,87,.35), 0 1px 3px rgba(31,27,24,.12);

  /* Migration adapter — every existing page's CSS was written around
     --black meaning BOTH "the page surface" (body{background:var(--black)})
     AND "a safe dark ink colour" (button text sitting on a gold gradient,
     small dark badges) — those two meanings now genuinely diverge (the
     page surface goes light, ink stays dark), so one variable can't cover
     both any more. This adapter keeps --black/--text/etc. correct for the
     INK meaning (the far more common one across most rules — text colours,
     button text, small accents), with ZERO edits needed to the hundreds of
     existing var(--text)/var(--black-2) etc. references sitewide. The one
     meaning this does NOT cover: a page's own body{background:...} and
     nav{background:...} rules — those must be pointed at
     var(--travertine)/var(--espresso) EXPLICITLY on every page, never left
     on var(--black), since that specific rule is exactly where the old
     dual meaning breaks. Same reasoning for any other rule using --black
     literally AS a large surface fill (a card, a section band) rather than
     as text/small-accent ink — check each one by eye, don't assume. */
  --black:   var(--espresso);
  --black-2: var(--ivory);
  --black-3: var(--ivory);
  --black-4: rgba(31,27,24,.14);
  --text:    var(--ink);
  --text-2:  var(--ink-soft);
  --text-3:  var(--ink-faint);
}
