/* ══════════════════════════════════════════════════════════════════════════
   FSM Design Tokens — CSS Custom Properties
   All components MUST use these variables — never hardcode colors.
══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand colors */
  --color-primary:      #1B3A5C;   /* Navy — headers, primary actions */
  --color-success:      #0F6E56;   /* Teal-green — active states, positive badges */
  --color-warning:      #BA7517;   /* Amber — warnings, NTE alerts */
  --color-danger:       #A32D2D;   /* Red — overdue, errors, delete */
  --color-info:         #1A5C8A;   /* Blue — WIP, informational */

  /* Filter bars */
  --color-filter-bg:    #1A5C1A;   /* Dark green — search filter bars */
  --color-filter-text:  #FFFFFF;   /* White — text on filter bars */

  /* Surfaces */
  --color-surface:      #FFFFFF;   /* Card/panel backgrounds */
  --color-surface-alt:  #F4F6F8;   /* Alternate row, off-white backgrounds */
  --color-border:       #CCCCCC;   /* Default borders */

  /* Text */
  --color-text:         #1A1A1A;   /* Body text */
  --color-text-muted:   #666666;   /* Secondary text */
  --color-text-inverse: #FFFFFF;   /* Text on dark backgrounds */

  /* Status badge colors */
  --color-status-jps:   #E07800;   /* Orange — Job Pending Schedule */
  --color-status-sch:   #0F6E56;   /* Green — Scheduled */
  --color-status-wip:   #1A5C8A;   /* Blue — Work In Progress */
  --color-status-fu:    #7B3EA8;   /* Purple — Follow Up */
  --color-status-tbq:   #BA7517;   /* Amber — To Be Quoted */
  --color-status-poo:   #1A7878;   /* Teal — Parts On Order */
  --color-status-cnb:   #A32D2D;   /* Red — Completed Not Billed */

  /* Borders / radius */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;

  /* Elevation */
  --shadow-card:        0 1px 4px rgba(0, 0, 0, 0.12);
  --shadow-modal:       0 8px 32px rgba(0, 0, 0, 0.28);
  --shadow-header:      0 2px 6px rgba(0, 0, 0, 0.18);

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

  /* Typography */
  --font-sans:   system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:   "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   20px;

  /* Header heights */
  --header-row-h:     80px;
  --header-total-h:   116px; /* main row (80) + lookup row (36) */
  --header-subnav-h:  40px;

  /* Transitions */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
}