/* ════════════════════════════════════════════════════════════════════════
   Sabai Ink — Design Tokens
   Single source of truth for the brand palette + typography.

   Loaded on every page BEFORE inline <style> blocks so per-page styles can
   override these values when needed (rare). Don't introduce new color hexes
   in page styles — add a token here first, then reference it via var().
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette (per Sabai Inc Brand Guidelines, May 2026) ──────── */
  --black:       #000000;
  --white:       #FFFFFF;
  --charcoal:    #1A1A1A;
  --light-gray:  #F2F2F2;
  --mid-gray:    #A6A6A6;
  --beige:       #E8E1D9;

  /* ── Hybrid accents (Option C "Fineline / Editorial", added May 2026) ──
     Use sparingly — limited drops, themed collection bands, hover states,
     badge fills (NEW / BESTSELLER / TRENDING). Never on primary CTAs;
     never as default body text color. */
  --terracotta:  #C97D5D;   /* in active use — most-used accent */
  --dusty-rose:  #E8C2C2;   /* defined for future use */
  --olive:       #7E8A6F;   /* defined for future use */

  /* ── Surface tones ─────────────────────────────────────────────────── */
  --page-bg:     #F5F2EE;   /* main page background, off-white */
  --chrome:      #9AA0A6;   /* brushed silver — trust band */

  /* ── Status colors (forms / feedback) ──────────────────────────────── */
  --status-success: #d8e7c1;
  --status-error:   #ff8a80;

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  /* Type scale tokens — adopt in new components; existing inline sizes
     can stay as-is until refactored. */
  --tracking-tight:  -0.03em;   /* large display headings */
  --tracking-snug:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.22em;   /* uppercase eyebrow labels */

  --line-body:    1.6;
  --line-loose:   1.7;
  --line-tight:   1.05;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   200ms;
  --dur-base:   350ms;
  --dur-slow:   600ms;
}