/* ============================================================
   VANZA — Field Service Management
   Design Token Layer  ·  light-first, dark fully realized
   Bold, high-contrast, sunlight-readable.

   Source of truth: Claude Design handoff "Vanza Design System"
   (2026-06-11, vanza-theme.css) — adapted: job-status spectrum
   extended from the design's 7 states to Vanza's 10-state enum
   using the same palette families. ALL UI consumes these tokens;
   no screen ships ad-hoc colours.
   Fonts are self-hosted (P4, 2026-06-11): latin woff2 subsets in
   assets/fonts/ so the tech PWA renders offline.
   ============================================================ */

/* ---- Fonts ---- */
@import url('/apps/vanza/assets/fonts/fonts.css');

:root {
  /* ---------- RAW PALETTE (navy ink) ---------- */
  --navy-950: #0A1124;
  --navy-900: #0E1830;
  --navy-800: #16233D;   /* brand ink */
  --navy-700: #1E3050;
  --navy-600: #2A4066;
  --navy-500: #3A5179;

  /* ---------- RAW PALETTE (cobalt primary) ---------- */
  --cobalt-50:  #ECF2FF;
  --cobalt-100: #D6E4FF;
  --cobalt-200: #AEC8FF;
  --cobalt-300: #7FA6FF;
  --cobalt-400: #4F82FF;
  --cobalt-500: #2E6BFF;
  --cobalt-600: #1656E6;   /* primary action */
  --cobalt-700: #0F40B4;
  --cobalt-800: #0E3284;
  --cobalt-900: #0C265F;

  /* ---------- STATUS / SEMANTIC RAW ---------- */
  --green-100:#DDF3E4; --green-500:#1F9E55; --green-600:#16863F; --green-700:#0F6B30;
  --amber-100:#FCEFCE; --amber-500:#F59E0B; --amber-600:#D97706; --amber-700:#B45309;
  --red-100:#FBE0E1;   --red-500:#E5484D;   --red-600:#CC2E33;   --red-700:#A51F23;
  --teal-100:#D5F2EE;  --teal-500:#0E9384;  --teal-600:#0B7468;  --teal-700:#085A50;
  --violet-100:#E9E3FE;--violet-500:#7C5CFC;--violet-600:#6741EA;--violet-700:#5331C4;
  --slate-100:#E7ECF3; --slate-500:#64748B; --slate-600:#4D5C73; --slate-700:#3A4658;

  /* ============================================================
     SEMANTIC TOKENS — LIGHT (default)
     ============================================================ */

  /* Brand */
  --brand-ink: var(--navy-800);
  --brand-ink-strong: var(--navy-900);

  /* Primary action */
  --primary: var(--cobalt-600);
  --primary-hover: var(--cobalt-700);
  --primary-press: var(--cobalt-800);
  --primary-tint: var(--cobalt-50);
  --primary-tint-2: var(--cobalt-100);
  --on-primary: #FFFFFF;

  /* Backgrounds — tiers */
  --bg-base:    #F1F4F8;   /* app canvas */
  --bg-sunken:  #E7ECF3;   /* wells, table headers, tracks */
  --bg-surface: #FFFFFF;   /* cards / panels */
  --bg-raised:  #FFFFFF;   /* popovers, menus (with shadow) */
  --bg-inset:   #F7F9FC;   /* inputs, nested rows */
  --bg-hover:   #F2F5FA;   /* row / item hover */
  --bg-selected:#ECF2FF;   /* selected row (primary tint) */
  --bg-brand:   var(--navy-800); /* dark nav surfaces on light app */

  /* Text hierarchy */
  --text-strong:  #0E1830;
  --text-default: #1C2A44;
  --text-muted:   #586884;
  --text-subtle:  #8A98AE;
  --text-disabled:#AEB9C9;
  --text-inverse: #FFFFFF;
  --text-on-brand:#E7EDF6;
  --text-link:    var(--cobalt-600);

  /* Borders & dividers */
  --border-subtle:  #E9EDF3;
  --border-default: #D7DEE8;
  --border-strong:  #BAC5D4;
  --border-focus:   var(--cobalt-500);
  --divider:        #EBEFF4;

  /* Semantic surfaces + text */
  --success: var(--green-600); --success-tint: var(--green-100); --success-text:#0F6B30;
  --warning: var(--amber-600); --warning-tint: var(--amber-100); --warning-text:#92500A;
  --danger:  var(--red-600);   --danger-tint:  var(--red-100);   --danger-text:#A51F23;
  --info:    var(--cobalt-600);--info-tint:    var(--cobalt-50); --info-text:#0E3284;

  /* Job status spectrum — Vanza job enum (10 states).
     Design handoff defined 7; extensions stay in-family:
       new            ← design "unassigned" (slate)
       dispatched     ← design "enroute" (amber)
       in_progress    ← design "onsite" (teal)
       awaiting_parts — deep amber (paused-for-supply sibling of dispatched)
       invoiced       — deep cobalt (admin/money progression)
       closed         — deep slate (terminal, quiet) */
  --st-new:            var(--slate-500);  --st-new-bg:            var(--slate-100);
  --st-scheduled:      var(--cobalt-600); --st-scheduled-bg:      var(--cobalt-50);
  --st-dispatched:     var(--amber-600);  --st-dispatched-bg:     var(--amber-100);
  --st-in-progress:    var(--teal-600);   --st-in-progress-bg:    var(--teal-100);
  --st-on-hold:        var(--violet-600); --st-on-hold-bg:        var(--violet-100);
  --st-awaiting-parts: var(--amber-700);  --st-awaiting-parts-bg: var(--amber-100);
  --st-completed:      var(--green-600);  --st-completed-bg:      var(--green-100);
  --st-invoiced:       var(--cobalt-800); --st-invoiced-bg:       var(--cobalt-100);
  --st-closed:         var(--slate-600);  --st-closed-bg:         var(--slate-100);
  --st-cancelled:      var(--red-600);    --st-cancelled-bg:      var(--red-100);

  /* Booking states reuse the job spectrum:
     scheduled/confirmed→st-scheduled · en_route→st-dispatched ·
     on_site→st-in-progress · done→st-completed · cancelled→st-cancelled */

  /* Focus ring */
  --ring: 0 0 0 3px rgba(46,107,255,0.32);
  --ring-danger: 0 0 0 3px rgba(229,72,77,0.30);

  /* ---------- ELEVATION (light) ---------- */
  --shadow-xs: 0 1px 2px rgba(14,24,48,0.06);
  --shadow-sm: 0 1px 2px rgba(14,24,48,0.06), 0 2px 4px rgba(14,24,48,0.05);
  --shadow-md: 0 2px 4px rgba(14,24,48,0.06), 0 6px 16px rgba(14,24,48,0.09);
  --shadow-lg: 0 4px 8px rgba(14,24,48,0.07), 0 16px 36px rgba(14,24,48,0.14);
  --shadow-xl: 0 8px 16px rgba(14,24,48,0.08), 0 28px 64px rgba(14,24,48,0.20);
  --shadow-focus-card: 0 0 0 1px var(--cobalt-200), 0 4px 12px rgba(22,86,230,0.12);

  /* ============================================================
     SCALE TOKENS (theme-independent)
     ============================================================ */

  /* Type families */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale (desktop) */
  --fs-display: 44px;  --lh-display: 1.04; --ls-display: -0.022em;
  --fs-h1: 34px;       --lh-h1: 1.08;      --ls-h1: -0.02em;
  --fs-h2: 26px;       --lh-h2: 1.14;      --ls-h2: -0.016em;
  --fs-h3: 20px;       --lh-h3: 1.22;      --ls-h3: -0.012em;
  --fs-h4: 17px;       --lh-h4: 1.3;       --ls-h4: -0.006em;
  --fs-body-lg: 17px;  --lh-body-lg: 1.5;
  --fs-body: 15px;     --lh-body: 1.5;
  --fs-sm: 13px;       --lh-sm: 1.45;
  --fs-label: 13px;    --lh-label: 1.3;    --ls-label: 0.01em;
  --fs-meta: 12px;     --lh-meta: 1.3;     --ls-meta: 0.04em;  /* uppercase metadata */
  --fs-mono: 13px;

  /* Spacing scale — 4px base */
  --sp-0: 0px;   --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-pill: 999px;

  /* Control heights — generous touch */
  --h-control-sm: 32px;
  --h-control: 40px;       /* desktop default */
  --h-control-lg: 48px;    /* mobile / primary */
  --h-touch: 56px;         /* field hero actions */
  --tap-min: 44px;         /* min hit target */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --brand-ink: #E7EDF6;
  --brand-ink-strong: #FFFFFF;

  --primary: #3D7BFF;
  --primary-hover: #5B90FF;
  --primary-press: #2E6BFF;
  --primary-tint: rgba(61,123,255,0.14);
  --primary-tint-2: rgba(61,123,255,0.24);
  --on-primary: #061226;

  --bg-base:    #0B1220;
  --bg-sunken:  #070D18;
  --bg-surface: #131C2E;
  --bg-raised:  #1A2438;
  --bg-inset:   #0F1828;
  --bg-hover:   #1A2438;
  --bg-selected:rgba(61,123,255,0.16);
  --bg-brand:   #0E1830;

  --text-strong:  #F5F8FC;
  --text-default: #DCE4F0;
  --text-muted:   #93A1BC;
  --text-subtle:  #6B7A99;
  --text-disabled:#475472;
  --text-inverse: #0B1220;
  --text-on-brand:#DCE4F0;
  --text-link:    #6FA0FF;

  --border-subtle:  #1F2C44;
  --border-default: #2A3950;
  --border-strong:  #3A4A64;
  --border-focus:   #3D7BFF;
  --divider:        #1C2A40;

  --success:#34C172; --success-tint:rgba(52,193,114,0.16); --success-text:#7BE2A6;
  --warning:#FBBF24; --warning-tint:rgba(245,158,11,0.16); --warning-text:#FCD77E;
  --danger: #FF6B6F; --danger-tint:rgba(229,72,77,0.18);   --danger-text:#FFA5A8;
  --info:   #3D7BFF; --info-tint:rgba(61,123,255,0.16);    --info-text:#9DBDFF;

  --st-new:            #93A1BC; --st-new-bg:            rgba(147,161,188,0.16);
  --st-scheduled:      #6FA0FF; --st-scheduled-bg:      rgba(61,123,255,0.16);
  --st-dispatched:     #FBBF24; --st-dispatched-bg:     rgba(245,158,11,0.16);
  --st-in-progress:    #2DD4BF; --st-in-progress-bg:    rgba(14,147,132,0.18);
  --st-on-hold:        #A78BFA; --st-on-hold-bg:        rgba(124,92,252,0.18);
  --st-awaiting-parts: #F59E0B; --st-awaiting-parts-bg: rgba(180,83,9,0.22);
  --st-completed:      #34C172; --st-completed-bg:      rgba(52,193,114,0.16);
  --st-invoiced:       #9DBDFF; --st-invoiced-bg:       rgba(61,123,255,0.22);
  --st-closed:         #8A98AE; --st-closed-bg:         rgba(100,116,139,0.22);
  --st-cancelled:      #FF6B6F; --st-cancelled-bg:      rgba(229,72,77,0.18);

  --ring: 0 0 0 3px rgba(61,123,255,0.40);
  --ring-danger: 0 0 0 3px rgba(255,107,111,0.36);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.30);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 6px 14px rgba(0,0,0,0.5), 0 20px 44px rgba(0,0,0,0.55);
  --shadow-xl: 0 10px 24px rgba(0,0,0,0.55), 0 32px 72px rgba(0,0,0,0.6);
  --shadow-focus-card: 0 0 0 1px rgba(61,123,255,0.5), 0 6px 16px rgba(0,0,0,0.5);
}

/* ============================================================
   BASE RESET + ELEMENT DEFAULTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-default);
  background: var(--bg-base);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
h1,h2,h3,h4,h5 { margin: 0; font-family: var(--font-display); color: var(--text-strong); }
p { margin: 0; }
button { font-family: inherit; }
::selection { background: var(--primary-tint-2); }

/* tabular numerals helper */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--font-mono); }

/* scrollbar */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}