/* ==========================================================================
   BILORAUX — tokens.css
   Design tokens ONLY (custom properties). Never hardcode color/font/space
   elsewhere. Locked luxe-apothecary system, derived from the printed labels.
   Phase B: these map 1:1 into theme.json.
   ========================================================================== */

:root {
  /* ---- Color -------------------------------------------------------------- */
  --bg:            #F7F5F1;   /* warm off-white — page base */
  --surface:       #FFFFFF;
  --surface-2:     #F1EEE7;   /* subtle raised/inset panel on the base */
  --ink:           #1A1A1A;   /* near-black — text, dark bands */
  --ink-soft:      #4A4741;   /* secondary text (passes AA on --bg) */
  --ink-mute:      #6C685F;   /* captions/meta (AA on --surface) */
  --on-ink:        #FFFFFF;   /* text on ink/dark bands */
  --on-ink-soft:   #D8D5CE;   /* secondary text on ink */

  --gold:          #C9A227;   /* signature gold — accents ONLY, never text on light */
  --gold-soft:     #C6A15B;
  --gold-deep:     #7A6015;   /* the ONLY gold dark enough for text on light — AA on --bg (5.49) and --gold-wash (5.07) */
  --line-gold:     #D8BC6E;   /* thin keylines */
  --gold-wash:     #F3ECD8;   /* faint gold fill for soft chips on light */

  --raspberry:     #D62828;   /* gummy product context only */
  --raspberry-deep:#B01E1E;   /* raspberry as text on light (AA) */
  --raspberry-wash:#FBE9E9;

  --line:          #E5E0D6;   /* hairline borders on --bg */
  --line-2:        #D9D3C4;   /* stronger divider */

  --success:       #2E6E4E;
  --error:         #B3261E;

  /* Semantic surfaces for the dark "label band" motif */
  --band:          var(--ink);
  --band-line:     var(--line-gold);

  /* ---- Type --------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif; /* self-hosted */
  --font-body:    "Jost", "Segoe UI", system-ui, sans-serif;     /* self-hosted */

  /* Fluid type scale (major-third-ish, clamped) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.40rem + 0.80vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.66rem + 1.45vw, 2.66rem);
  --step-4:  clamp(2.44rem, 1.96rem + 2.40vw, 3.55rem);

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --tracking-label: 0.14em;   /* uppercase label-band letter-spacing */

  /* ---- Space (4px base) --------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2.5rem;   --s-6: 4rem;    --s-7: 6rem;

  /* ---- Radius / shadow / motion ------------------------------------------ */
  --radius:    8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow:    0 8px 30px rgb(26 26 26 / 0.08);
  --shadow-lg: 0 20px 50px rgb(26 26 26 / 0.14);

  --container: 1200px;
  --measure:   65ch;                 /* readable prose width */
  --gutter:    clamp(1.125rem, 4vw, 2.5rem);

  --transition: 200ms ease;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Focus ring (accessible on any surface via offset) ----------------- */
  --ring:      var(--ink);
  --ring-dark: var(--bg);            /* used inside dark bands */

  /* ---- Z-index scale ------------------------------------------------------ */
  --z-base: 0;
  --z-header: 100;
  --z-overlay: 900;
  --z-drawer: 1000;
  --z-skiplink: 1100;
}