/* ============================================================
   LangCart design14 — "The Order Rail"
   design9's blue palette, single-page master–detail layout.
   ------------------------------------------------------------
   Blue-cast porcelain workspace, deep marine brand, and an
   aqua highlighter. Brand and marker are deliberately kept in
   different colour families — marine is dark and navy-leaning,
   the marker is light and cyan-leaning — so the linking engine
   never reads as "just more brand colour". Case rows move off
   indigo (too close to marine here) onto violet, and amber
   stays: warm against a cool ground is exactly what "needs a
   human eye" should look like. New here: --ok, a market-stall
   green reserved for "done" — the processed edge on list rows.
   ============================================================ */

:root {
  /* ---- color: ground & surfaces ---- */
  --field:        #EAEEF5;   /* page ground, blue-cast porcelain */
  --field-deep:   #DCE3EF;   /* wells, table headers, inset areas */
  --card:         #FFFFFF;   /* raised paper surfaces — pure white for crisp figure-ground */
  --card-dim:     #F2F5FA;   /* zebra stripes, quiet fills */

  /* ---- color: ink ---- */
  --ink:          #1A2A44;   /* deep navy ink — primary text, blue-leaning */
  --ink-2:        #4A5872;   /* secondary text — darker for crisp contrast */
  --ink-3:        #8792A6;   /* placeholders, disabled, meta */
  --line:         #CBD4E2;   /* hairlines — one step darker for crisp edges */
  --line-strong:  #ADB9CC;   /* control borders */

  /* ---- color: semantic ---- */
  --market:       #14538B;   /* marine — brand / primary / confirmed */
  --market-deep:  #0E3F6C;   /* hover, pressed */
  --market-wash:  #DBE6F3;   /* soft marine fills */
  --amber:        #B45309;   /* needs attention: unread, AI guesses */
  --amber-wash:   #FAEEDC;
  --red:          #B3261E;   /* problems, destructive */
  --red-wash:     #F9E5E3;
  --convo:        #B84512;   /* open conversation — red-orange, urgent but not an error */
  --convo-wash:   #FAEBDD;
  --case:         #6B3FC4;   /* case rows — violet, clear of marine + aqua */
  --case-wash:    #EBE4FA;
  --ok:           #1F8A4C;   /* done/processed — green, clear of marine */
  --ok-wash:      #DFF0E4;
  --seen:         #E7B416;   /* read-but-not-done — pending yellow edge on list rows */
  --seen-wash:    #FAF2DC;   /* pending wash behind read list rows */

  /* ---- color: the marker (linking engine only) ---- */
  --mark:         #8ADCEF;   /* aqua highlighter — selection swipe */
  --mark-soft:    #CBEFF8;   /* hover wash */
  --mark-line:    #34A5C4;   /* underline hint on linkable words */
  --mark-speak:   #63CFE8;   /* playback follow */

  /* ---- scrim ---- */
  --overlay:      rgba(12, 26, 44, 0.45);   /* modal backdrop */

  /* ---- type ---- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, monospace;

  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-26: 1.625rem;
  --fs-34: 2.125rem;

  /* ---- space ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- radius ---- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;   /* data surfaces sit crisper; r-lg keeps modals/login soft */
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(16, 30, 48, 0.07), 0 1px 1px rgba(16, 30, 48, 0.04);
  --shadow-2: 0 4px 14px rgba(16, 30, 48, 0.11), 0 2px 4px rgba(16, 30, 48, 0.06);
  --shadow-3: 0 14px 40px rgba(16, 30, 48, 0.20), 0 4px 10px rgba(16, 30, 48, 0.09);

  /* ---- motion ---- */
  --t-fast: 120ms ease;
  --t-med: 180ms cubic-bezier(0.3, 0.7, 0.4, 1);

  /* ---- layers ---- */
  --z-sticky: 20;
  --z-topbar: 40;
  --z-overlay: 50; /* detail overlays: above the page, below modals & dropdowns */
  --z-modal: 60;
  --z-layer: 80;   /* dropdowns, tooltips: above modals */

  /* ---- fixed sizes ---- */
  --topbar-h: 54px;
  --conf-slot: 22px;  /* fixed-width confidence slot in the link cell — snug around the plain % text so the name keeps more characters */
  --shell-max: 2200px;  /* workstation width cap — topbar and orders align to it */
}