/* ============================================================================
   VARAi Brand Design Tokens — harmonized "editorial optical" palette
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH. Import this on every VARAi surface:
     - Wholesale B2B platform (this repo)
     - Commerce Studio (storefront + admin)
     - Design Studio
     - varai-site (marketing)

   The palette unifies the two design languages that already shared DNA:
   varai-site's Fraunces + cream + warm-ink foundation, plus the cognac /
   tortoiseshell accent from the Commerce Studio collection storefront.

   Fonts (add the <link> in each app's <head>):
     Fraunces (display) · Manrope (UI/body) · JetBrains Mono (labels/mono)
     https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap
   ============================================================================ */
:root {
  /* ── Paper / surfaces ─────────────────────────────────────────────── */
  --varai-paper:      #FAF6EF; /* warm ivory — page background */
  --varai-surface:    #FFFFFF; /* cards / panels */
  --varai-cream-100:  #F4F1EA;
  --varai-cream-200:  #EBE6DB;
  --varai-cream-300:  #D8D1C1;
  --varai-cream-400:  #B8B0A0;
  --varai-line:       #E8DFD2; /* hairline borders / dividers */

  /* ── Ink / text (warm near-black) ─────────────────────────────────── */
  --varai-ink:        #1C1815; /* primary text */
  --varai-ink-soft:   #4A423B; /* secondary text */
  --varai-ink-muted:  #7A7067; /* muted / captions */

  /* ── Accent — cognac / tortoiseshell (the brand accent) ───────────── */
  --varai-accent:      #B65C34;
  --varai-accent-deep: #8F4522; /* hover / pressed */
  --varai-accent-wash: #F3E7DC; /* tinted backgrounds / chips */

  /* ── Dark editorial panel (heroes, sidebars, footers) ─────────────── */
  --varai-panel:      #211C18;
  --varai-panel-ink:  #F4ECE1;

  /* ── Status ───────────────────────────────────────────────────────── */
  --varai-pending:       #C2760C;  --varai-pending-wash:  #FBEDCF;
  --varai-approved:      #3E6B4F;  --varai-approved-wash: #E3EEE6;
  --varai-denied:        #A4432E;  --varai-denied-wash:   #F6E2DC;

  /* ── Typography ───────────────────────────────────────────────────── */
  --varai-font-display: 'Fraunces', Georgia, serif;
  --varai-font-ui:      'Manrope', system-ui, -apple-system, sans-serif;
  --varai-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Shape / elevation / motion ───────────────────────────────────── */
  --varai-radius:      14px;
  --varai-radius-sm:   10px;
  --varai-radius-pill: 999px;
  --varai-shadow-card: 0 10px 30px rgba(28, 24, 21, 0.06);
  --varai-shadow-lift: 0 16px 40px rgba(28, 24, 21, 0.10);
  --varai-motion:      .18s ease;
}

/* Optional base application — opt in by adding class="varai-brand" to <body>
   (or map these tokens onto an app's existing variables). */
.varai-brand {
  background: var(--varai-paper);
  color: var(--varai-ink);
  font-family: var(--varai-font-ui);
}
.varai-brand h1, .varai-brand h2, .varai-brand h3,
.varai-brand .varai-display { font-family: var(--varai-font-display); color: var(--varai-ink); }