/* =====================================================================
   TOKENS: Retabionix store

   The ONLY file that names a colour, a font or a radius.

   Taken from the live retabionix.com theme (6 Oct 2026), not guessed:

     Oxblood       #50000B   ink on cream, and the brand panels
     Oxblood deep  #3E000A   announcement bar and footer base
     Cream         #F9F3EE   the page ground
     Gold          #D4A84B   accent, ON OXBLOOD ONLY
     Coral         #FF9693   second accent word, ON OXBLOOD ONLY
     Berry         #BC0A32   the accent on cream: prices, links, the dot

   Measured, never eyeballed (WCAG AA is 4.5:1 for body text):

     oxblood on cream          14.18     cream on oxblood         14.18
     #4E373B body on cream      9.87     cream .78 on oxblood      8.83
     oxblood .64 on cream       5.22     cream .64 on oxblood      6.22
     berry on cream             5.91     gold on oxblood           7.06
     berry on cream-alt         5.44     coral on oxblood          7.46
     gold on cream              2.01  <- FAILS. Gold is never text on cream.
     coral on cream             1.90  <- FAILS. Same rule.

   That gold measurement is why the light theme's accent is berry and why
   the gold the client uses everywhere appears only inside .tone-dark.

   Two tones. The page is light; .tone-dark (the oxblood panels, header
   bar, footer, gate) re-points the same token names, so a component
   written once reads correctly on either ground.
   ===================================================================== */

:root {
  /* ---- 1. BRAND --------------------------------------------------------- */
  --oxblood:         #50000B;
  --oxblood-deep:    #3E000A;
  --oxblood-hi:      #6E0A18;
  --cream:           #F9F3EE;
  --cream-alt:       #F3E9E0;
  --paper:           #FFFDFB;
  --gold:            #D4A84B;
  --coral:           #FF9693;
  --berry:           #BC0A32;
  --berry-deep:      #9E0828;
  --ink-body:        #4E373B;

  /* ---- 2. LIGHT TONE (default) ----------------------------------------- */
  --accent:          var(--berry);
  --accent-bright:   var(--berry-deep);
  --accent-deep:     var(--berry-deep);
  --accent-soft:     color-mix(in srgb, var(--berry) 7%,  transparent);
  --accent-line:     color-mix(in srgb, var(--berry) 34%, transparent);
  --accent-2:        var(--berry);

  --bg:              var(--cream);
  --bg-alt:          var(--cream-alt);
  --panel:           var(--paper);
  --surface:         var(--paper);
  --surface-hover:   color-mix(in srgb, var(--oxblood) 4%, var(--paper));
  --raised:          var(--paper);
  --band:            var(--cream-alt);

  --line:            color-mix(in srgb, var(--oxblood) 18%, transparent);
  --line-soft:       color-mix(in srgb, var(--oxblood) 12%, transparent);
  --line-faint:      color-mix(in srgb, var(--oxblood) 7%,  transparent);

  --text:            var(--oxblood);
  --text-body:       var(--ink-body);
  --text-dim:        color-mix(in srgb, var(--oxblood) 72%, transparent);
  --text-faint:      color-mix(in srgb, var(--oxblood) 64%, transparent);
  --text-error:      var(--berry-deep);
  --ok:              #1F6B45;

  --btn-bg:          var(--oxblood);
  --btn-ink:         var(--cream);

  --shadow:          0 18px 40px -22px color-mix(in srgb, var(--oxblood) 45%, transparent);

  /* ---- 3. TYPE -----------------------------------------------------------
     Google Sans for display and DM Sans for prose, as on the live site.
     DM Mono for instrument output (eyebrows, specs, SKUs, batch numbers):
     the one change that makes the store read analytical, not supplement. */
  --font-display: "Google Sans", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font:         "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fw-black: 700;
  --fw-bold:  600;
  --fw-med:   500;

  --fs-hero:    clamp(38px, 5vw, 64px);
  --fs-h2:      clamp(30px, 3.6vw, 48px);
  --fs-h3:      19px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-label:   12px;
  --fs-micro:   11px;

  --track-eyebrow: .2em;
  --track-btn:     .02em;
  --track-nav:     .08em;

  /* ---- 4. SHAPE ----------------------------------------------------------
     Retabionix is soft: 40px panels, 20px cards, pill buttons.          */
  --radius-panel: 36px;
  --radius:       20px;
  --radius-sm:    12px;
  --radius-pill:  999px;
  --border:       1px solid var(--line);

  --max:         1240px;
  --gutter:      16px;
  --section-y:   96px;
  --section-y-sm:60px;

  --ease:        cubic-bezier(.16,.9,.24,1);
  --t-fast:      .2s;
  --t-med:       .35s;

  --z-marquee:   400;
  --z-sticky:    450;
  --z-drawer:    500;
  --z-overlay:   600;
  --z-gate:      900;

  /* The panel gradient, lifted from the live hero. */
  --panel-grad:  radial-gradient(120% 90% at 85% 0%, var(--oxblood-hi) 0%, transparent 60%),
                 linear-gradient(160deg, var(--oxblood) 0%, var(--oxblood-deep) 100%);
}

@media (min-width: 768px) { :root { --gutter: 24px; } }

/* ---- 5. DARK TONE: the oxblood panels ---------------------------------- */
.tone-dark {
  --accent:          var(--gold);
  --accent-bright:   #E3C177;
  --accent-soft:     color-mix(in srgb, var(--gold) 12%, transparent);
  --accent-line:     color-mix(in srgb, var(--gold) 40%, transparent);
  --accent-2:        var(--coral);

  --bg:              var(--oxblood);
  --bg-alt:          var(--oxblood-deep);
  --panel:           color-mix(in srgb, var(--cream) 5%, var(--oxblood));
  --surface:         color-mix(in srgb, var(--cream) 5%, transparent);
  --surface-hover:   color-mix(in srgb, var(--cream) 9%, transparent);

  --line:            color-mix(in srgb, var(--cream) 22%, transparent);
  --line-soft:       color-mix(in srgb, var(--cream) 14%, transparent);
  --line-faint:      color-mix(in srgb, var(--cream) 8%,  transparent);

  --text:            var(--cream);
  --text-body:       color-mix(in srgb, var(--cream) 78%, transparent);
  --text-dim:        color-mix(in srgb, var(--cream) 72%, transparent);
  --text-faint:      color-mix(in srgb, var(--cream) 64%, transparent);
  --text-error:      var(--coral);

  --btn-bg:          var(--cream);
  --btn-ink:         var(--oxblood);
  color: var(--text-body);
}