/* ============================================================
   BSC Ops — Design Tokens (PR 1 of design refresh)
   Source of truth for the "Refined Utility B v4" system.
   Locked surface tokens per design_handoff_bsc_ops/README.md §4.

   Loaded AFTER the inline <style> in index.html so the legacy
   aliases at the bottom of :root override the older brand
   values (--cream, --gold, --shadow, --border, --milk, etc.)
   without requiring a sweep of every selector that uses them.

   No italics: italic IvyPresto is intentionally not declared.
   ============================================================ */

@font-face {
  font-family: 'IvyPresto Display';
  src: url('/fonts/IvyPrestoDisplay-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hoefler Text';
  src: url('/fonts/HoeflerText-Roman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand ramp -------------------------------------------- */
  --bsc-dark-blue:      #023d4a;
  --bsc-dark-blue-ink:  #012a33;
  --bsc-light-blue:     #b9dfe3;
  --bsc-light-blue-50:  #dceff2;
  --bsc-light-blue-25:  #ecf6f8;
  --bsc-opal-mint:      #d7e7dd;
  --bsc-opal-mint-50:   #ebf3ee;
  --bsc-gold:           #c9a76d; /* README locked — not the #b78b40 in tokens/colors_and_type.css */
  --bsc-gold-soft:      #b8995a;
  --bsc-gold-deep:      #8a6f3a;
  --bsc-cream:          #f6f1e7;

  /* ---- Surface stack (locked per README §4.1) ---------------- */
  --bg-page:            #f9f6f1;
  --bg-page-2:          #f2ede4;
  --bg-card:            #ffffff;
  --bg-card-soft:       #fdfdfc;
  --bg-stripe:          #fdfdfc;
  --bg-row-hover:       #fdfaf1;
  --bg-row-selected:    #eef6f7;

  /* ---- Ink ramp ---------------------------------------------- */
  --ink:                var(--bsc-dark-blue);
  --ink-2:              #2d4d56;
  --ink-3:              #4a6c75;

  /* ---- Borders (ink-tinted hairlines, 3 strengths) ----------- */
  --border-1:           rgba(2,61,74,0.10);
  --border-2:           rgba(2,61,74,0.18);
  --border-3:           rgba(2,61,74,0.26);

  /* ---- Metallic shadow stack (README §4.3) ------------------- */
  --sh-card:            0 1px 0 rgba(255,255,255,0.6) inset,
                        0 1px 1px rgba(14,53,64,0.04),
                        0 1px 3px rgba(14,53,64,0.06),
                        0 8px 22px -10px rgba(14,53,64,0.10);
  --sh-btn:             0 1px 0 rgba(255,255,255,0.85) inset,
                        0 -1px 0 rgba(14,53,64,0.05) inset,
                        0 1px 1px rgba(14,53,64,0.06),
                        0 1px 2px rgba(14,53,64,0.08);
  --sh-btn-press:       0 1px 0 rgba(255,255,255,0.4) inset,
                        0 1px 1px rgba(14,53,64,0.10) inset;
  --sh-btn-primary:     0 1px 0 rgba(255,255,255,0.20) inset,
                        0 -1px 0 rgba(0,0,0,0.18) inset,
                        0 1px 2px rgba(14,53,64,0.20),
                        0 4px 10px -2px rgba(14,53,64,0.30);
  --sh-input-focus:     0 0 0 3px rgba(185,223,227,0.45);
  --sh-drawer:          -8px 0 24px -10px rgba(14,53,64,0.18),
                        -2px 0 6px -2px rgba(14,53,64,0.10);
  --sh-card-hover:      0 1px 0 rgba(255,255,255,0.6) inset,
                        0 2px 4px rgba(14,53,64,0.06),
                        0 4px 8px rgba(14,53,64,0.08),
                        0 12px 28px -10px rgba(14,53,64,0.16);

  /* ---- Light-blue deep accent (used by .btn.accent, focus rings) -- */
  --bsc-light-blue-deep: #8fc4cb;

  /* ---- Type stacks ------------------------------------------- */
  --font-display:       'IvyPresto Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:          'Hoefler Text', 'EB Garamond', Georgia, serif;
  --font-mono:          ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Legacy aliases ---------------------------------------
     These re-point the existing tokens used throughout
     index.html (via var(--cream), var(--gold), etc.) to the
     new locked values. Loading this file after the inline
     <style> means these win the cascade. Per-component
     restyling will retire these aliases over PRs 2-25. */
  --cream:              var(--bg-page);
  --milk:               var(--bg-card-soft);
  --gold:               var(--bsc-gold);
  --shadow:             var(--sh-card);
  --border:             var(--border-1);
  --muted:              #6b8a92;
  --dark-blue:          var(--bsc-dark-blue);
  --light-blue:         var(--bsc-light-blue);
  --opal:               var(--bsc-opal-mint);
  --green:              #2d7a47;
  --red:                #b03142;
  --orange:             #c55a11;
  --text:               var(--ink);
  /* Mock-CSS-style aliases consumed by primitives.css (mocks use --mono / --sans
     / --gold-deep / --opal-50 / --light-blue-deep / --light-blue-25 directly). */
  --mono:               var(--font-mono);
  --sans:               var(--font-body);
  --gold-deep:          var(--bsc-gold-deep);
  --gold-soft:          var(--bsc-gold-soft);
  --light-blue-deep:    var(--bsc-light-blue-deep);
  --light-blue-25:      var(--bsc-light-blue-25);
  --light-blue-50:      var(--bsc-light-blue-50);
  --opal-50:            var(--bsc-opal-mint-50);

  /* ---- Auxiliary signaling tokens ---------------------------
     Non-brand accents used in narrow, semantic contexts.       */
  --teal:               #0891b2;            /* prep/inv badges (prepItems, cogs) */
  --teal-bg:            rgba(8,145,178,0.10);
  --disabled:           #cbd5d8;            /* inactive status dots */

  /* ---- Role color tokens ------------------------------------
     One swatch per role. Used by checklist group headers, role
     pills, and the nav role badge. Brand navy for Manager (most
     authoritative), teal for Barista, ink-3 grey for everyone
     else. */
  --role-manager:       var(--bsc-dark-blue);
  --role-barista:       var(--teal);
  --role-other:         var(--ink-3);
}

/* ---- Page chrome ------------------------------------------ */
body {
  background: linear-gradient(180deg, var(--bg-page), var(--bg-page-2));
  background-attachment: fixed;
}

/* ---- Heading typography (no italics, weight 300) ---------- */
h1, h2, h3, .stat-value, .page-title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
}