/* ============================================================
   theme.css — semantic token mapping (layer 2 of 5)
   Maps brand primitives → role tokens. Two theme layers share ONE primitive
   set: the public storefront (display serif) and the admin tool, which
   overrides --font-display to the body sans (the display serif never appears
   in-tool). Allowed to reference primitives from tokens.css.
   ============================================================ */
:root {
  --ink:        var(--c-ink);
  --ink-2:      var(--c-ink-2);
  --ink-deep:   var(--c-ink-deep);
  --cream:      var(--c-cream);
  --cream-2:    var(--c-cream-2);
  --paper:      var(--c-paper);
  --ivory:      var(--c-ivory);
  --taupe:      var(--c-taupe);
  --sage:       var(--c-sage);
  /* interactive green accent → AA sage; warm accent → dusty rose (brand palette) */
  --olive:      var(--c-sage-ink);
  --olive-ink:  var(--c-sage-ink);
  --gold:       var(--c-rose);
  --gold-ink:   var(--c-rose-ink);
  --danger:     var(--c-danger);
  --line:       var(--c-line);

  /* semantic roles */
  --bg:           var(--c-bone);
  --bg-soft:      var(--c-cream-2);
  --surface:      var(--c-paper);
  --text:         var(--c-ink);
  --text-muted:   var(--c-taupe-ink);
  --accent:       var(--c-sage-ink);
  --accent-ink:   var(--c-sage-ink);
  --highlight:    var(--c-rose);

  --white:        var(--c-white);
  --gold-bright:  var(--c-rose);
  --danger-bg:    var(--c-danger-bg);
  --onink:        var(--c-onink);
  --onink-dim:    var(--c-onink-dim);
  --onink-bright: var(--c-onink-bright);

  --font-display: var(--font-display-stack);
  --font-body:    var(--font-body-stack);
  --font-script:  var(--font-script-stack);

  --r: var(--radius);
}

/* Admin theme layer: same primitives, sans display, navy chrome accent. */
[data-theme="admin"] {
  --bg:           var(--c-paper);
  --font-display: var(--font-body-stack); /* no public serif in-tool */
  --accent:       var(--c-admin-navy);
}

/* ------------------------------------------------------------------
   Mock-Square theme layer ("Pretend Square") — DELIBERATELY off-brand
   so the demo reads as a different site ("you left Amelia's and went to
   Square"). These Square-ish hex values live here (one of the two files
   allowed raw hex) and are referenced only by pages/mock-square.css.
   ------------------------------------------------------------------ */
[data-theme="mock-square"] {
  --sq-bg:        #f7f8f9;   /* Square light app background */
  --sq-surface:   #ffffff;
  --sq-ink:       #1c1c1c;   /* near-black text */
  --sq-muted:     #6a6f73;   /* secondary grey */
  --sq-line:      #e0e2e3;   /* hairline borders */
  --sq-navy:      #1a1a2e;   /* Square header chrome */
  --sq-blue:      #006aff;   /* Square action blue */
  --sq-blue-ink:  #ffffff;
  --sq-green:     #008000;   /* paid / success */
  --sq-green-bg:  #e6f4ea;
  --sq-amber:     #b25e00;   /* preparing */
  --sq-amber-bg:  #fcefda;
  --sq-ready-bg:  #e6f4ea;
}