:root {
  /* Surface */
  --surface-app:        #f5f6f8;
  --surface-card:       #ffffff;
  --surface-panel:      #fafbfc; /* nested panels inside cards (added 2026-05-28, Phase 0.1) */
  --surface-sunken:     #eef0f3;
  --surface-nav:        #0f1f3d;
  --surface-nav-hover:  #1a2c52;
  --surface-nav-active: #243a66;
  --surface-row-hover:  #fafbfc;

  /* Border */
  --border-subtle:  #e4e7ec;
  --border-default: #d0d5dd;
  --border-strong:  #98a2b3;

  /* Text */
  --text-primary:     #101828;
  --text-secondary:   #475467;
  --text-tertiary:    #667085;
  --text-inverse:     #ffffff;
  --text-inverse-dim: #b8c2d4;
  --text-link:        #1a56db;
  --text-danger:      #dc2626;

  /* Brand / accent */
  --brand-navy:     #0f1f3d;
  --brand-navy-600: #1a3a7a;
  --brand-accent:   #2563eb;

  /* Status */
  --status-dsp-bg:          #fef3c7;
  --status-dsp-fg:          #92400e;
  --status-it-bg:           #dbeafe;
  --status-it-fg:           #1e40af;
  --status-del-bg:          #d1fae5;
  --status-del-fg:          #065f46;
  --status-unassigned-bg:   #f2f4f7;
  --status-unassigned-fg:   #475467;
  --status-inactive-bg:     #f9fafb;
  --status-inactive-fg:     #98a2b3;
  --status-inactive-border: #e4e7ec;

  --status-error-bg:      #fef2f2;
  --status-error-fg:      #991b1b;
  --status-error-border:  #fecaca;

  --status-success-bg:     #f0fdf4;
  --status-success-fg:     #166534;
  --status-success-border: #bbf7d0;

  --status-info-bg:     #eff6ff;
  --status-info-fg:     #1e40af;
  --status-info-border: #bfdbfe;

  /* warning/amber: bg + fg reuse the amber values already present above
     (--status-dsp-*); border is amber-200 (the -200 tint matching the
     success/error/info border convention — the only new value). */
  --status-warning-bg:     #fef3c7;
  --status-warning-fg:     #92400e;
  --status-warning-border: #fde68a;

  /* Dispatch status pills (outline) — Sub-phase 1.1 extraction (T1).
     Distinct from the filled .pill-* badges driven by --status-* above:
     outline pills are background + colored border, no text color. Values
     are the byte-identical pre-extraction literals. One pair per variant
     (Ruling 2 superset) so a state can be recolored independently later. */
  --dispatch-pill-base-bg:                   #f3f3f3;
  --dispatch-pill-base-border:               #cfcfcf;
  --dispatch-pill-unscheduled-bg:            #fff7db;
  --dispatch-pill-unscheduled-border:        #e3cf8a;
  --dispatch-pill-pending-assignment-bg:     #fdecc8;
  --dispatch-pill-pending-assignment-border: #e69f00;
  --dispatch-pill-dispatched-bg:             #e7f0ff;
  --dispatch-pill-dispatched-border:         #9eb8e8;
  --dispatch-pill-in-transit-bg:             #e7f0ff;
  --dispatch-pill-in-transit-border:         #9eb8e8;
  --dispatch-pill-active-bg:                 #e7f0ff;
  --dispatch-pill-active-border:             #9eb8e8;
  --dispatch-pill-assigned-bg:               #e7f0ff;
  --dispatch-pill-assigned-border:           #9eb8e8;
  --dispatch-pill-delivered-bg:              #e6f4ea;
  --dispatch-pill-delivered-border:          #9ac7a3;

  /* Filter panel + typeahead (Sub-phase 1.1 extraction) — exact-value
     tokens preserving the pre-extraction appearance. --typeahead-menu-bg
     duplicates --surface-card by value; the typeahead vocabulary is
     self-contained and a future unification pass can collapse it cheaply. */
  --filter-panel-border:     #d1d5db;
  --filter-panel-bg:         #f8fafc;
  --typeahead-menu-bg:       #ffffff;
  --typeahead-menu-border:   #d0d0d0;
  --typeahead-menu-shadow:   0 2px 6px rgba(0, 0, 0, 0.12);
  --typeahead-item-hover-bg: #ebebeb;

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

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 1px 3px rgba(16, 24, 40, 0.08),
               0 1px 2px rgba(16, 24, 40, 0.04);

  /* Layout */
  --nav-width:     220px;
  --header-height: 52px;
}