/* =====================================================================
   InnateScheduler — Service Bar design tokens
   ---------------------------------------------------------------------
   Version : 0.1 · 2026-06-10
   Status  : NOT YET LOADED BY ANY PAGE. This file is the single source
             of truth for the Service Bar direction (Concept B + approved
             grafts: paper one step warm, operator-warm voice, sans-serif
             display step). It is wired into nothing in the app today.

   Purpose : every color, type, space, shape, elevation, z, motion,
             focus and touch value the new UI consumes — as vanilla CSS
             custom properties on :root. No build step. No framework.

   Adoption (when Gabe approves):
     1. Add to each HTML shell, BEFORE styles.css:
          <link rel="stylesheet" href="/styles/tokens.css?v=SHARED_TOKEN">
     2. Bump the shared ?v= cache token on tokens.css AND styles.css in
        the SAME commit — the app's shells share one version token; a
        split bump ships mismatched halves to live restaurants.
     3. Migrate token-group by token-group (see 01-audit/design-audit.md
        "Token drift" for the low-risk order). This file supersedes the
        rs-* block at styles.css:7021–51 once migration completes.

   Compatibility contract:
     03-system/components.html shipped with an inline fallback copy of
     these tokens (<style id="tokens">). Every name defined there is
     defined here — same names, values refined only where the contrast
     program or the role/status collision ban required it (see §10).
     Enabling the sheet's <link> must never break the sheet.

   Audit requirements carried by tokens (01-audit, "Findings by
   checklist item"): one global disabled recipe (#7), custom controls
   (#1), visible focus rings (#12 — solid 2px, 2px offset, replacing the
   0.22-alpha ring), decodable status language (#9 — hues spent only on
   meaning; Draft is never amber), no default-blue links (#6 — links are
   --color-link green), 44px touch floor (#12 — --tap-min).

   Dark theme: NOT designed yet. When it is, re-point §2 SEMANTIC and
   §3 COMPONENT aliases only; §1 raw scales never change per-theme.
   ===================================================================== */

:root {

  /* ===================================================================
     §1 · RAW SCALES — physical values. Components never reference
     these directly; they consume §2/§3 aliases.
     =================================================================== */

  /* ---- ink / neutral ladder — green-tinted, 9 steps ---------------
     900 text · 800 strong-secondary · 700 secondary · 600 muted &
     placeholder (AA on page/panel/sunken) · 500 quiet icons ·
     400 disabled (contrast-exempt, never readable copy) ·
     300 control borders · 200 hairlines · 100 faint hairlines        */
  --scale-ink-900: #0d1f1a;
  --scale-ink-800: #2a3b33;
  --scale-ink-700: #44564e;
  --scale-ink-600: #5b6c64;
  --scale-ink-500: #7b8a83;
  --scale-ink-400: #9aa8a1;
  --scale-ink-300: #d7dfda;
  --scale-ink-200: #e5eae7;
  --scale-ink-100: #eef2ef;

  /* ---- paper / surface levels --------------------------------------
     GRAFT (Maison): page paper is one step WARM of the board's
     #fafbfa — steel structure, warm room. Panels stay white so cards
     read as the working surface; sunken is the recessed well behind
     chips and off-states; raised is panel + --sh-2 (overlays).       */
  --scale-paper-page:   #fbfaf6;
  --scale-paper-panel:  #ffffff;
  --scale-paper-raised: #ffffff;   /* + --sh-2; never a new hue */
  --scale-paper-sunken: #f2f5f3;

  /* ---- green — safe · primary · healthy ----------------------------
     900 text-on-tint · 800 hover/active · 700 solid primary (white
     AA) · 500 accent bar/dot (decorative, always beside text) ·
     100 subtle tint fill · 50 selection wash                         */
  --scale-green-900: #0c4a3a;
  --scale-green-800: #0f5240;
  --scale-green-700: #166a54;
  --scale-green-500: #2fa37c;
  --scale-green-100: #e2efe9;
  --scale-green-50:  #f0f7f3;

  /* ---- blue — info · neutral fact ----------------------------------
     900 reserve dark · 800 text-on-tint · 700 solid (white AA) ·
     500 changed-flag dot · 100 tint fill · 50 wash                   */
  --scale-blue-900: #173f6e;
  --scale-blue-800: #1d5694;
  --scale-blue-700: #2160a8;
  --scale-blue-500: #3b82cd;
  --scale-blue-100: #e7f0fa;
  --scale-blue-50:  #f3f8fd;

  /* ---- amber — setup · warning -------------------------------------
     900 reserve dark · 800 text-on-tint · 700 solid (white AA) ·
     500 warning dot/edge (3.0 vs panel & sunken) · 100 tint fill ·
     50 wash. Amber has ONE job: warnings & setup. Draft never wears
     it; role hues never approach it (§10).                           */
  --scale-amber-900: #6a4500;
  --scale-amber-800: #7c5100;
  --scale-amber-700: #8a5a00;
  --scale-amber-500: #c06c00;
  --scale-amber-100: #fcf2e0;
  --scale-amber-50:  #fdf8ec;

  /* ---- red — destructive · urgent ----------------------------------
     900 reserve dark · 800 hover + text-on-tint · 700 solid danger
     (white AA) & unfilled-shift mark · 500 decorative · 100 tint ·
     50 wash. (v0.1 refinement: the board's #a02c26 "red-ink" collapsed
     into 800 #9a2b25 — ΔE imperceptible, one dark red instead of two.)*/
  --scale-red-900: #7e221d;
  --scale-red-800: #9a2b25;
  --scale-red-700: #b3362f;
  --scale-red-500: #cd4f47;
  --scale-red-100: #fdecea;
  --scale-red-50:  #fef6f5;

  /* ===================================================================
     §2 · SEMANTIC ALIASES — what things MEAN. A future dark theme
     re-points this section (and §3) only.
     =================================================================== */

  /* ---- text ---- */
  --color-text:           var(--scale-ink-900);
  --color-text-secondary: var(--scale-ink-700);
  --color-text-muted:     var(--scale-ink-600);  /* also placeholders */
  --color-text-disabled:  var(--scale-ink-400);  /* exempt; never copy */
  --color-text-inverse:   #ffffff;

  /* ---- surfaces ---- */
  --surface-page:   var(--scale-paper-page);
  --surface-panel:  var(--scale-paper-panel);
  --surface-raised: var(--scale-paper-raised);
  --surface-sunken: var(--scale-paper-sunken);
  /* interaction surfaces (hover families used by rows/buttons) */
  --surface-hover:       #f7faf8;  /* secondary-button & list-row hover */
  --surface-hover-faint: #fbfdfc;  /* table-row hover */
  --surface-band:        #fbfcfb;  /* section bands, grid footers */
  /* tinted papers for full-width notices */
  --paper-warning: #fffdf7;
  --paper-danger:  #fffbfa;

  /* ---- borders / hairlines ---- */
  --line-strong: var(--scale-ink-300);  /* control borders */
  --line-mid:    var(--scale-ink-200);  /* card hairlines */
  --line-soft:   var(--scale-ink-100);  /* row separators */
  --line-hover:  #b9c6bf;               /* control border on hover */
  --line-warning-soft: #f0e3c8;         /* setup-notice border */
  --hairline:        1px solid var(--scale-ink-200);
  --hairline-strong: 1px solid var(--scale-ink-300);
  --hairline-faint:  1px solid var(--scale-ink-100);
  --col-faint: #f0f4f1;                 /* faint column rules in grids */

  /* ---- primary (green family) ---- */
  --color-primary:        var(--scale-green-700);
  --color-primary-hover:  var(--scale-green-800);
  --color-primary-active: var(--scale-green-800);
  --color-primary-subtle: var(--scale-green-100); /* tint fills, pills */
  --color-primary-wash:   var(--scale-green-50);  /* selection wash */
  --color-primary-accent: var(--scale-green-500); /* bars/dots, decorative */
  --color-primary-text:   var(--scale-green-900); /* text on subtle/wash */
  --color-on-primary:     #ffffff;

  /* ---- info / warning / danger ---- */
  --color-info:         var(--scale-blue-700);
  --color-info-text:    var(--scale-blue-800);
  --color-info-subtle:  var(--scale-blue-100);
  --color-warning:      var(--scale-amber-700);
  --color-warning-text: var(--scale-amber-800);
  --color-warning-subtle: var(--scale-amber-100);
  --color-danger:        var(--scale-red-700);
  --color-danger-hover:  var(--scale-red-800);
  --color-danger-text:   var(--scale-red-800);
  --color-danger-subtle: var(--scale-red-100);

  /* ---- links — never default blue (audit #6) ---- */
  --color-link:       var(--color-primary);
  --color-link-hover: var(--color-primary-hover);

  /* ---- status language (decodable; audit #9) -----------------------
     Draft = dashed NEUTRAL (never amber). Final = info blue.
     Sent = healthy green ("published" in category terms — app copy
     says Sent). Warning = amber. Conflict/urgent = red.              */
  --status-draft-fg:     var(--scale-ink-700);
  --status-draft-bg:     var(--surface-panel);
  --status-draft-border: var(--scale-ink-400);   /* 1px DASHED */
  --status-final-fg:     var(--scale-blue-800);
  --status-final-bg:     var(--scale-blue-100);
  --status-published-fg: var(--scale-green-900); /* app copy: "Sent" */
  --status-published-bg: var(--scale-green-100);
  --status-sent-fg:      var(--status-published-fg);
  --status-sent-bg:      var(--status-published-bg);
  --status-warning-fg:   var(--scale-amber-800);
  --status-warning-bg:   var(--scale-amber-100);
  --status-conflict-fg:  var(--scale-red-800);
  --status-conflict-bg:  var(--scale-red-100);
  --status-info-fg:      var(--scale-blue-800);
  --status-info-bg:      var(--scale-blue-100);
  /* flag dots & status edges (non-text UI ≥3.0 vs panel and sunken) */
  --dot-changed: var(--scale-blue-500);
  --dot-warning: var(--scale-amber-500);
  --dot-urgent:  var(--scale-red-700);

  /* ---- app chrome (dim nav — board verbatim) ---- */
  --chrome-bg:        var(--scale-ink-900);
  --chrome-text:      #cfd9d3;
  --chrome-text-mut:  #aebdb5;
  --chrome-accent:    var(--scale-green-500);

  /* ---- scrim ---- */
  --scrim: rgba(13, 31, 26, 0.32);

  /* ===================================================================
     §3 · COMPONENT ALIASES — the short names the Service Bar component
     sheet (03-system/components.html) and the concept board consume.
     KEEP EVERY NAME. These are aliases into §1/§2; a dark theme
     re-points them together with §2.
     =================================================================== */
  --ink:     var(--scale-ink-900);
  --ink-2:   var(--scale-ink-700);
  --ink-3:   var(--scale-ink-600);
  --ink-dis: var(--scale-ink-400);

  --paper:   var(--surface-page);
  --surface: var(--surface-panel);
  --well:    var(--surface-sunken);
  --wash:    var(--color-primary-wash);

  --line:       var(--scale-ink-200);
  --line-2:     var(--scale-ink-300);
  --line-faint: var(--scale-ink-100);

  --green:      var(--scale-green-700);
  --green-deep: var(--scale-green-800);
  --green-bar:  var(--scale-green-500);
  --green-tint: var(--scale-green-100);
  --green-ink:  var(--scale-green-900);

  --blue:      var(--scale-blue-700);
  --blue-ink:  var(--scale-blue-800);
  --blue-tint: var(--scale-blue-100);
  --blue-dot:  var(--scale-blue-500);

  --amber:      var(--scale-amber-700);
  --amber-ink:  var(--scale-amber-800);
  --amber-tint: var(--scale-amber-100);
  --amber-dot:  var(--scale-amber-500);

  --red:      var(--scale-red-700);
  --red-deep: var(--scale-red-800);
  --red-ink:  var(--scale-red-800);  /* v0.1: collapsed from #a02c26 */
  --red-tint: var(--scale-red-100);

  --nav:      var(--chrome-bg);
  --nav-mut:  var(--chrome-text-mut);
  --nav-item: var(--chrome-text);

  /* ===================================================================
     §4 · TYPE — system grotesque now; self-hosted Inter is the
     documented upgrade path (template at end of file). Two weights
     total: 400 / 600. Hierarchy comes from size + ink, not weight
     sprawl.
     =================================================================== */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular:  400;
  --fw-semibold: 600;

  /* scale — px / line-height / weight / letter-spacing
     display — GRAFT (Carte, de-serifed): the week header set with
     intent. Sans, semibold, tight tracking, tabular numerals.        */
  --fs-display: 28px;  --lh-display: 1.15; --fw-display: 600; --ls-display: -0.015em;
  --fs-h1:      22px;  --lh-h1:      1.2;  --fw-h1:      600; --ls-h1:      -0.01em;
  --fs-h2:      18px;  --lh-h2:      1.3;  --fw-h2:      600; --ls-h2:      -0.01em;
  --fs-body:    15px;  --lh-body:    1.5;  --fw-body:    400; --ls-body:    0;
  --fs-data:    13px;  --lh-data:    1.4;  --fw-data:    400; --ls-data:    0;     /* 600 for emphasis cells */
  --fs-time:    12px;  --lh-time:    1.3;  --fw-time:    600; --ls-time:    0;     /* chip times — always tabular */
  --fs-caption: 11px;  --lh-caption: 1.3;  --fw-caption: 600; --ls-caption: 0.06em; /* uppercase overlines */

  /* font-feature tokens — every time, hour, count and money column:
       font-variant-numeric: var(--fnum-data);                        */
  --fnum-data:    tabular-nums;
  --fnum-default: normal;

  /* ===================================================================
     §5 · SPACE · SHAPE · EDGES — 4/8 system, 2–64. Dense rows are
     built from 2/4/8; sections breathe at 24/32/48/64.
     (--space-1…7 are the sheet's names; 0 and 8 extend the scale.)
     =================================================================== */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* radii — 8px stays the convention on cards, panels, dialogs and
     buttons (kept from today's app). 6px on DENSE controls only —
     shift chips, small buttons, inner menu items — where 8px on a
     ≤27px-tall element reads pill-ish and eats corner pixels the
     dense grid needs. 4px for the 15–16px checkbox boxes. 999px pills.*/
  --r:      8px;
  --r-s:    6px;
  --r-xs:   4px;
  --r-pill: 999px;

  /* status/role edge widths (left edges on chips, notices, rows) */
  --edge-status: 2px;   /* warning / danger / info left edges */
  --edge-role:   3px;   /* role identity edge on shift chips */

  /* ===================================================================
     §6 · ELEVATION — three levels maximum, one light direction (top).
     Structure comes from hairlines + whitespace first; shadows are
     reserved.
       sh-1   resting cards, hovered chips
       sh-drag picked-up chip / dragged row (between 1 and 2)
       sh-2   overlays only: dropdowns, dialogs, toasts
     =================================================================== */
  --sh-1:    0 1px 2px rgba(13, 31, 26, 0.05), 0 1px 1px rgba(13, 31, 26, 0.03);
  --sh-drag: 0 3px 8px rgba(13, 31, 26, 0.10), 0 10px 24px rgba(13, 31, 26, 0.10);
  --sh-2:    0 4px 12px rgba(13, 31, 26, 0.08), 0 16px 40px rgba(13, 31, 26, 0.12);

  /* ===================================================================
     §7 · Z-INDEX LADDER — named layers only; no ad-hoc z values.
     =================================================================== */
  --z-base:     0;
  --z-raised:   1;    /* selected row inset edges, sticky cell shadows */
  --z-sticky:   10;   /* sticky table headers, grid day header */
  --z-nav:      100;  /* sidebar / mobile tab bar */
  --z-savebar:  200;  /* autosave bar floats above content, below menus */
  --z-dropdown: 300;  /* popovers, filter menus, time popover */
  --z-scrim:    400;
  --z-dialog:   500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ===================================================================
     §8 · MOTION — asymmetric, shorter than feels safe. Overlays appear
     instantly (in: 0ms) and fade out at --dur-2/3. Perceived speed is
     part of the direction's identity.
       dur-1  80ms  micro state (dots, checkmark pops)
       dur-2 120ms  hovers, chips, ghosts            (= --t-fast)
       dur-3 180ms  rows, toggles, savebar           (= --t-base)
       dur-4 240ms  panel slide/collapse — the ceiling
     =================================================================== */
  --dur-1: 80ms;
  --dur-2: 120ms;
  --dur-3: 180ms;
  --dur-4: 240ms;
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* sheet/board legacy names */
  --t-fast: var(--dur-2);
  --t-base: var(--dur-3);

  /* ===================================================================
     §9 · FOCUS · TOUCH · CONTROL METRICS
     One focus recipe app-wide (audit #12 — replaces the 0.22-alpha
     near-invisible ring):
       outline: var(--focus-ring-w) solid var(--focus);
       outline-offset: var(--focus-ring-offset);
     Danger controls swap --focus for --focus-danger. Inset offset
     (-2px) only where the ring would clip (table rows, tabs).
     =================================================================== */
  --focus:             var(--color-primary);
  --focus-danger:      var(--color-danger);
  --focus-ring-w:      2px;
  --focus-ring-offset: 2px;

  /* touch + control heights — 36 form / 32 toolbar / 27 row-action.
     EVERY interactive control rises to the 44px --tap-min floor below
     900px (audit #12; enforced in the component sheet's media block). */
  --tap-min:  44px;
  --ctl-h:    36px;
  --ctl-h-sm: 32px;
  --ctl-h-xs: 27px;

  /* ===================================================================
     §10 · ROLE ACCENTS — 7 hues, identity only, NEVER status.
     -------------------------------------------------------------------
     The ban: no red, pink or amber-adjacent role hues, so a role edge
     or chip fill can never impersonate a warning or a conflict. Role
     color is never the sole identifier — the chip always carries the
     role name in text; washes carry the role ink at AA 4.5 (verified
     in contrast-table.md).

     Hue map: violet 252° · teal 192° · olive 68° · purple 292° ·
     espresso (low-chroma dark brown — reads wood/coffee, not orange;
     amber stays the only VIVID warm on the surface) · slate (desat
     blue-grey, distinct from saturated info blue) · taupe (warm grey).

     v0.1 refinements vs the sheet's inline block, forced by the ban:
       bartender #93386b → #7d3a92 (was hue 326° plum — pink-adjacent;
         its wash #f9eaf3 was a near-twin of --red-tint #fdecea)
       linecook  #8c4f17 → #6b4a2c (was saturated orange-brown —
         amber-adjacent; its wash #f9efe2 was a near-twin of
         --amber-tint #fcf2e0). Wash regreyed to #f2ede5.

     Canonical generic slots: real tenants define arbitrary roles —
     the app assigns --accent-N by stable role index. The named
     --role-* tokens are the Café Marcel demo mapping used by the
     boards and the component sheet.
     =================================================================== */
  --accent-1: #5b4ea8;  --accent-1-wash: #efecf9;  /* violet   */
  --accent-2: #0c6478;  --accent-2-wash: #e3f2f6;  /* teal     */
  --accent-3: #5c6614;  --accent-3-wash: #f3f5df;  /* olive    */
  --accent-4: #7d3a92;  --accent-4-wash: #f4ecf9;  /* purple   */
  --accent-5: #6b4a2c;  --accent-5-wash: #f2ede5;  /* espresso */
  --accent-6: #47586e;  --accent-6-wash: #ecf1f6;  /* slate    */
  --accent-7: #6b6053;  --accent-7-wash: #f2efe9;  /* taupe    */

  --role-host:           var(--accent-1);
  --role-host-wash:      var(--accent-1-wash);
  --role-server:         var(--accent-2);
  --role-server-wash:    var(--accent-2-wash);
  --role-busser:         var(--accent-3);
  --role-busser-wash:    var(--accent-3-wash);
  --role-bartender:      var(--accent-4);
  --role-bartender-wash: var(--accent-4-wash);
  --role-linecook:       var(--accent-5);
  --role-linecook-wash:  var(--accent-5-wash);
  --role-souschef:       var(--accent-6);
  --role-souschef-wash:  var(--accent-6-wash);
  --role-dish:           var(--accent-7);
  --role-dish-wash:      var(--accent-7-wash);
}

/* =====================================================================
   REDUCED MOTION — token-level kill switch. Components that consume
   --dur-* / --t-* inherit this automatically; looping shimmer/spin
   animations must ALSO hide or freeze their keyframes (the component
   sheet shows the recipe). Never convey state by motion alone.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
    --dur-4: 0.01ms;
  }
}

/* =====================================================================
   OPTIONAL TYPE UPGRADE — self-hosted Inter (NOT active in v0.1).
   ---------------------------------------------------------------------
   The system stack above is the shipping typeface. When/if Gabe
   approves the Inter upgrade:

     1. Ship ONE variable woff2 (latin subset, weights 400–600 only,
        ~40–48 KB) at /fonts/InterVariable.woff2. No external font
        requests — self-hosted only.
     2. Preload it in each shell's <head> to beat first paint:
          <link rel="preload" href="/fonts/InterVariable.woff2"
                as="font" type="font/woff2" crossorigin>
     3. Uncomment the @font-face below. font-display: swap — schedule
        text must render instantly on kitchen-corridor connections;
        a one-reflow swap to Inter beats invisible text every time.
        The metric overrides keep that swap from shifting layout.
     4. Flip --font to:
          --font: "InterVariable", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     5. Bump the shared ?v= token (fonts cache hard).

   @font-face {
     font-family: "InterVariable";
     src: url("/fonts/InterVariable.woff2") format("woff2");
     font-weight: 100 900;            // variable axis; app uses 400/600
     font-style: normal;
     font-display: swap;
     ascent-override: 90%;            // metric-match the system stack
     descent-override: 22.5%;         //   so the swap doesn't reflow
     line-gap-override: 0%;
   }
   ===================================================================== */