/* =============================================================
   AFD-10 Dispatcher — design tokens
   Ported principles from HELPDESK_DESIGN_EXTRACT.md §A (operator-density)
   - All hex live HERE. No raw hex outside this file.
   - No var(--token, #fallback) — fallbacks are a known anti-pattern (§F).
   - Status colors stay muted (saturation ≤ ~40%); red reserved for SLA.
   - Brand colors are forbidden in operator chrome:
       #0000AF (brand blue), #00FFC1 (brand teal) — DO NOT USE.
   - UI primary = indigo #5B5FC7 (helpdesk-aligned).
   ============================================================= */

/* --- AFD-10 Phase B / AC-8 — self-hosted IBM Plex Sans (Cyrillic subset).
       Helpdesk §F.12 trap: Google Fonts default ships Latin-only; Russian
       falls through to -apple-system, breaking visual consistency. Self-host
       woff2 in `vendor/fonts/`. P16 — pin SHA256 per vendor/README.md. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/dispatch/vendor/fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/dispatch/vendor/fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/dispatch/vendor/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/dispatch/vendor/fonts/IBMPlexSans-Bold.woff2') format('woff2');
}

:root,
[data-theme="light"] {
  /* ---- surfaces ---- */
  --bg-app:        #F4F5F8;
  --bg-canvas:     #ECEDF2;
  --surface:       #FFFFFF;
  --surface-alt:   #F8F9FB;
  --surface-sunk:  #F1F2F6;
  --surface-hover: #F7F8FB;
  --overlay:       rgba(17, 19, 28, 0.42);

  /* ---- text ---- */
  --fg:            #14161D;
  --fg-strong:     #0A0B10;
  --fg-muted:      #5A5F6E;
  --fg-subtle:     #8A8F9E;
  --fg-disabled:   #B6BAC4;
  --fg-on-accent:  #FFFFFF;

  /* ---- borders ---- */
  --border:        #DCDEE5;
  --border-soft:   #E6E8EE;
  --border-strong: #C5C8D2;
  --border-focus:  #5B5FC7;

  /* ---- primary (indigo, muted) ---- */
  --primary:        #5B5FC7;
  --primary-hover:  #4A4FB8;
  --primary-press:  #3D42A8;
  --primary-bg:     #EEEEFB;
  --primary-bg-2:   #E0E1F6;
  --primary-fg:     #FFFFFF;

  /* Payment Tablet reference surface (08 City trip). These stay fixed in
     console light/dark themes because the preview represents device UI. */
  --tablet-bg:       #F8F8F8;
  --tablet-blue:     #0000AF;
  --tablet-header:   #030386;
  --tablet-yellow:   #F8B200;
  --tablet-green:    #40B269;
  --tablet-text:     #3A3A3A;
  --tablet-white:    #FFFFFF;
  --tablet-black:    #000000;

  /* ---- status: online / healthy ---- */
  --ok:        #2F7D4B;
  --ok-bg:     #E6F1E9;
  --ok-fg:     #1F5A36;

  /* ---- status: idle / warning ---- */
  --warn:      #B27418;
  --warn-bg:   #FBF1DD;
  --warn-fg:   #7A4F0B;

  /* ---- status: offline / neutral ---- */
  --idle:      #6B7280;
  --idle-bg:   #ECEDF1;
  --idle-fg:   #3F4451;

  /* ---- status: violation / SLA red (use sparingly) ---- */
  --bad:       #B53541;
  --bad-bg:    #FCE7E9;
  --bad-fg:    #841F29;

  /* ---- status: speed (orange, separate from red) ---- */
  --speed:     #BC5A1B;
  --speed-bg:  #FBEADA;
  --speed-fg:  #7A3A0F;

  /* ---- semantic event hues (low-sat) ---- */
  --hue-route:    #2C6485;  /* route_off — teal-blue */
  --hue-stop:     #6B47B5;  /* stop_missed — violet */
  --hue-trip:     #2F7D4B;  /* trip lifecycle — green */
  --hue-fsm:      #5A5F6E;  /* state change — gray */
  --hue-heartbeat:#9097A5;  /* heartbeat */

  /* ---- partner accents (kept low-sat) ---- */
  --partner-1: #4A6FB8;  /* innoforce-almaty */
  --partner-2: #B58A2F;  /* avtobys-astana   */
  --partner-3: #6A8F4A;  /* unassigned       */

  /* ---- typography ---- */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;   /* body — operator-density */
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;  /* AFD-39 D1 in-pass (RF §6 Obs#2) — .pf-title referenced var(--fs-15) with no token (silent no-op) */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;

  --lh-tight: 1.2;
  --lh-body:  1.4;

  /* ---- spacing ---- */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 16px;
  --sp-8: 20px;
  --sp-9: 24px;
  --sp-10: 32px;
  --sp-12: 48px;

  /* ---- radii ---- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-pill: 999px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 0 rgba(20, 22, 29, 0.04);
  --shadow-2: 0 1px 2px rgba(20, 22, 29, 0.06), 0 0 0 1px rgba(20, 22, 29, 0.04);
  --shadow-3: 0 4px 12px rgba(20, 22, 29, 0.08), 0 0 0 1px rgba(20, 22, 29, 0.04);
  --shadow-pop: 0 12px 32px rgba(20, 22, 29, 0.18), 0 0 0 1px rgba(20, 22, 29, 0.06);

  /* ---- table density (helpdesk §B.3) ---- */
  --row-h:        24px;
  --row-h-dense:  22px;
  --row-h-comfy:  28px;
  --th-h:         28px;

  /* ---- timing ---- */
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 360ms;
  --ease:   cubic-bezier(.2, .8, .2, 1);
}

/* ---- SLA palette (helpdesk §A.5 — identical both themes) ---- */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --sla-critical: #DC2626;
  --sla-high:     #F59E0B;
  --sla-medium:   #84CC16;
  --sla-low:      #06B6D4;
}

/* ---- Helpdesk-canonical token aliases (§A) ----
   These map our tokens to helpdesk names so a future Ktor port is 1:1.
   AFD-10 author code SHOULD use the names above; this block exists
   to ease porting and to let CSS authors fluent in helpdesk find
   familiar names. */
:root, [data-theme="light"] {
  --color-bg:          var(--bg-app);
  --color-bg-card:     var(--surface);
  --color-bg-hover:    var(--surface-hover);
  --color-text:        var(--fg);
  --color-text-muted:  var(--fg-muted);
  --color-text-soft:   var(--fg-subtle);
  --color-text-inverse:#FFFFFF;
  --color-primary:     var(--primary);
  --color-primary-hover: var(--primary-hover);
  --primary-soft:      rgba(91, 95, 199, 0.08);
  --gradient-primary:  linear-gradient(135deg, #5B5FC7, #4B4FB3);
  --primary-glow:      0 6px 18px rgba(91, 95, 199, 0.20);
  --color-border:      var(--border);
  --color-info-bg:     rgba(51, 163, 255, 0.08);
}
[data-theme="dark"] {
  --color-text-inverse:#FFFFFF; /* §F.2: stays white in dark mode */
  --primary-soft:      rgba(155, 161, 229, 0.10);
  --gradient-primary:  linear-gradient(135deg, #9BA1E5, #B1B6F0);
  --primary-glow:      0 6px 18px rgba(155, 161, 229, 0.25);
}

/* dark theme (nice-to-have, per brief §5) */
[data-theme="dark"] {
  --bg-app:        #0F1117;
  --bg-canvas:     #0A0C12;
  --surface:       #161922;
  --surface-alt:   #1B1F2A;
  --surface-sunk:  #11141C;
  --surface-hover: #1F2330;
  --overlay:       rgba(0, 0, 0, 0.6);

  --fg:            #E6E8EE;
  --fg-strong:     #FFFFFF;
  --fg-muted:      #98A0B0;
  --fg-subtle:     #6E7585;
  --fg-disabled:   #4A5060;
  --fg-on-accent:  #FFFFFF;

  --border:        #262A36;
  --border-soft:   #1F2330;
  --border-strong: #353A48;
  --border-focus:  #8B8FE0;

  --primary:        #8B8FE0;
  --primary-hover:  #A0A4EA;
  --primary-press:  #C2C5F2;
  --primary-bg:     #232548;
  --primary-bg-2:   #2C2F58;
  --primary-fg:     #0F1117;

  --ok:        #5BB378;
  --ok-bg:     #1B2D22;
  --ok-fg:     #A8DDB7;

  --warn:      #D9A24B;
  --warn-bg:   #322712;
  --warn-fg:   #F0CB85;

  --idle:      #8A90A0;
  --idle-bg:   #1E2230;
  --idle-fg:   #B6BAC7;

  --bad:       #DE6471;
  --bad-bg:    #321B1F;
  --bad-fg:    #F0A5AE;

  --speed:     #DB8650;
  --speed-bg:  #2B1A0E;
  --speed-fg:  #F0BB91;

  --hue-route:    #5C9CC2;
  --hue-stop:     #9D80DC;
  --hue-trip:     #5BB378;
  --hue-fsm:      #98A0B0;
  --hue-heartbeat:#6E7585;

  --partner-1: #7E9FE0;
  --partner-2: #DCB565;
  --partner-3: #9CC07A;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.06);
}