/* =============================================================================
   SWAP (Duty Planner) — DESIGN SYSTEM · TOKEN LAYER
   Single source of truth. DESIGN.md and styleguide.html both point HERE.
   3-Tier: Primitive → Semantic → Component
   Base unit: 8pt · Neutral-first · Blue primary · Light mode (dark-ready structure)

   Direction: "Operational clarity" — internal ops tool for planners scheduling
   bus-route auditors. Legibility > decoration. Flat surfaces + hairline borders.
   Adapted from `20 - Areas/Design-System/foundation/tokens.css`; SWAP-specific
   additions: duty/task status semantics, non-red "today" marker, availability
   Y/N, tabular numerals for data tables.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   TIER 1 — PRIMITIVE
   Raw values. Never reference directly in components.
   ----------------------------------------------------------------------------- */
:root {
  /* Neutral palette (zinc, 11 steps) */
  --primitive-white:       #ffffff;
  --primitive-neutral-50:  #fafafa;
  --primitive-neutral-100: #f4f4f5;
  --primitive-neutral-200: #e4e4e7;
  --primitive-neutral-300: #d4d4d8;
  --primitive-neutral-400: #a1a1aa;
  --primitive-neutral-500: #71717a;
  --primitive-neutral-600: #52525b;
  --primitive-neutral-700: #3f3f46;
  --primitive-neutral-800: #27272a;
  --primitive-neutral-900: #18181b;
  --primitive-neutral-950: #09090b;

  /* Accent palette — Blue (the ONE primary accent; retires the prototype's
     blue+purple split. Swap this ramp if the client brings brand colors.) */
  --primitive-blue-50:  #eff6ff;
  --primitive-blue-100: #dbeafe;
  --primitive-blue-200: #bfdbfe;
  --primitive-blue-300: #93c5fd;
  --primitive-blue-500: #3b82f6;
  --primitive-blue-600: #2563eb;
  --primitive-blue-700: #1d4ed8;
  --primitive-blue-900: #1e3a8a;

  /* Status ramps ------------------------------------------------------------ */
  /* Red — destructive + error ONLY. Never "today", never a neutral highlight. */
  --primitive-red-50:   #fef2f2;
  --primitive-red-200:  #fecaca;
  --primitive-red-500:  #ef4444;
  --primitive-red-600:  #dc2626;
  --primitive-red-900:  #7f1d1d;

  /* Green — success / complete / available */
  --primitive-green-50:  #f0fdf4;
  --primitive-green-100: #dcfce7;
  --primitive-green-200: #bbf7d0;
  --primitive-green-500: #22c55e;
  --primitive-green-600: #16a34a;
  --primitive-green-700: #15803d;
  --primitive-green-900: #14532d;

  /* Amber — warning / pending */
  --primitive-amber-50:  #fffbeb;
  --primitive-amber-200: #fde68a;
  --primitive-amber-500: #f59e0b;
  --primitive-amber-600: #d97706;
  --primitive-amber-900: #78350f;

  /* Violet — reserved for a SINGLE non-action accent if ever needed
     (e.g. a data-viz series). NOT a button, link, or primary CTA color.
     Kept as a named primitive so it can't creep back in as an ad-hoc hex. */
  --primitive-violet-500: #8b5cf6;
  --primitive-violet-600: #7c3aed;

  /* Spacing scale (8pt base) */
  --primitive-space-1:  8px;
  --primitive-space-2:  16px;
  --primitive-space-3:  24px;
  --primitive-space-4:  32px;
  --primitive-space-5:  40px;
  --primitive-space-6:  48px;
  --primitive-space-8:  64px;
  --primitive-space-10: 80px;
  /* Half-steps for dense UI (tables, calendar cells, chips) */
  --primitive-space-0-5: 4px;
  --primitive-space-1-5: 12px;
  --primitive-space-2-5: 20px;

  /* Typography scale */
  --primitive-text-xs:   0.75rem;   /* 12px */
  --primitive-text-sm:   0.875rem;  /* 14px */
  --primitive-text-base: 1rem;      /* 16px */
  --primitive-text-lg:   1.125rem;  /* 18px */
  --primitive-text-xl:   1.25rem;   /* 20px */
  --primitive-text-2xl:  1.5rem;    /* 24px */
  --primitive-text-3xl:  1.875rem;  /* 30px */

  /* Radius — moderate; professional, not playful (matches prototype) */
  --primitive-radius-sm:   4px;
  --primitive-radius-md:   6px;
  --primitive-radius-lg:   8px;
  --primitive-radius-xl:   12px;
  --primitive-radius-full: 9999px;

  /* Shadow — flat by default; elevation reserved for overlays */
  --primitive-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --primitive-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --primitive-shadow-lg: 0 10px 25px -5px rgb(0 0 0 / 0.12), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Duration */
  --primitive-duration-fast:   100ms;
  --primitive-duration-normal: 150ms;
  --primitive-duration-slow:   200ms;
}

/* -----------------------------------------------------------------------------
   TIER 2 — SEMANTIC
   Purpose-named. Theme swap happens HERE (dark mode / client brand).
   ----------------------------------------------------------------------------- */
:root {
  /* Surface */
  --color-bg:            var(--primitive-neutral-50);
  --color-bg-subtle:     var(--primitive-neutral-100);
  --color-bg-muted:      var(--primitive-neutral-200);
  --color-surface:       var(--primitive-white);
  --color-overlay:       rgb(9 9 11 / 0.5);

  /* Border */
  --color-border:        var(--primitive-neutral-200);
  --color-border-strong: var(--primitive-neutral-300);

  /* Text */
  --color-text:          var(--primitive-neutral-950);
  --color-text-muted:    var(--primitive-neutral-500);
  --color-text-subtle:   var(--primitive-neutral-400);
  --color-text-inverse:  var(--primitive-white);
  --color-link:          var(--primitive-blue-700);

  /* Interactive — Primary (BLUE, the one action color) */
  --color-primary:       var(--primitive-blue-600);
  --color-primary-hover: var(--primitive-blue-700);
  --color-primary-active: var(--primitive-blue-900);
  --color-primary-fg:    var(--primitive-white);
  --color-focus-ring:    var(--primitive-blue-500);

  /* Interactive — Secondary */
  --color-secondary:       var(--primitive-neutral-100);
  --color-secondary-hover: var(--primitive-neutral-200);
  --color-secondary-fg:    var(--primitive-neutral-900);

  /* Interactive — Outline */
  --color-outline-border:   var(--primitive-neutral-300);
  --color-outline-hover-bg: var(--primitive-neutral-100);
  --color-outline-fg:       var(--primitive-neutral-900);

  /* Interactive — Ghost */
  --color-ghost-hover-bg: var(--primitive-neutral-100);
  --color-ghost-fg:       var(--primitive-neutral-900);

  /* Interactive — Destructive (RED — this is the ONLY place red means "action") */
  --color-destructive:       var(--primitive-red-600);
  --color-destructive-hover: var(--primitive-red-500);
  --color-destructive-fg:    var(--primitive-white);

  /* Status — generic */
  --color-success:    var(--primitive-green-600);
  --color-success-bg: var(--primitive-green-50);
  --color-success-fg: var(--primitive-green-900);
  --color-warning:    var(--primitive-amber-600);
  --color-warning-bg: var(--primitive-amber-50);
  --color-warning-fg: var(--primitive-amber-900);
  --color-error:      var(--primitive-red-600);
  --color-error-bg:   var(--primitive-red-50);
  --color-error-fg:   var(--primitive-red-900);
  --color-info:       var(--primitive-blue-600);
  --color-info-bg:    var(--primitive-blue-50);
  --color-info-fg:    var(--primitive-blue-900);

  /* -------------------------------------------------------------------------
     SWAP DOMAIN STATUS — map every duty/task state to a badge role.
     Rule: state is ALWAYS conveyed by (color + text label), never color alone.
     ------------------------------------------------------------------------- */
  /* Duty Status */
  --status-unallocated-bg: var(--primitive-neutral-100);
  --status-unallocated-fg: var(--primitive-neutral-700);
  --status-allocated-bg:   var(--primitive-blue-50);
  --status-allocated-fg:   var(--primitive-blue-900);
  /* Task Status */
  --status-new-bg:      var(--primitive-neutral-100);
  --status-new-fg:      var(--primitive-neutral-700);
  --status-active-bg:   var(--primitive-blue-50);
  --status-active-fg:   var(--primitive-blue-900);
  --status-pending-bg:  var(--primitive-amber-50);
  --status-pending-fg:  var(--primitive-amber-900);
  --status-complete-bg: var(--primitive-green-50);
  --status-complete-fg: var(--primitive-green-900);

  /* Availability (Team Editor) — green available / neutral unavailable.
     Color pairs with a Y/N letter in the component; never color-only. */
  --avail-yes-bg:  var(--primitive-green-100);
  --avail-yes-fg:  var(--primitive-green-700);
  --avail-no-bg:   var(--primitive-neutral-100);
  --avail-no-fg:   var(--primitive-neutral-400);

  /* Calendar "today" — BLUE ring, NOT red. Red is danger only. */
  --color-today-ring: var(--primitive-blue-500);
  --color-today-bg:   var(--primitive-blue-50);
  /* Selected day / cell */
  --color-selected-bg: var(--primitive-blue-100);

  /* Spacing aliases */
  --space-1: var(--primitive-space-1);   --space-2: var(--primitive-space-2);
  --space-3: var(--primitive-space-3);   --space-4: var(--primitive-space-4);
  --space-5: var(--primitive-space-5);   --space-6: var(--primitive-space-6);
  --space-0-5: var(--primitive-space-0-5);
  --space-1-5: var(--primitive-space-1-5);
  --space-2-5: var(--primitive-space-2-5);

  /* Typography */
  --text-xs: var(--primitive-text-xs);   --text-sm: var(--primitive-text-sm);
  --text-base: var(--primitive-text-base); --text-lg: var(--primitive-text-lg);
  --text-xl: var(--primitive-text-xl);   --text-2xl: var(--primitive-text-2xl);
  --text-3xl: var(--primitive-text-3xl);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;

  --leading-tight: 1.25;  --leading-normal: 1.5;  --leading-relaxed: 1.625;
  --weight-normal: 400;   --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  /* Radius aliases */
  --radius-sm: var(--primitive-radius-sm);   --radius-md: var(--primitive-radius-md);
  --radius-lg: var(--primitive-radius-lg);   --radius-xl: var(--primitive-radius-xl);
  --radius-full: var(--primitive-radius-full);

  /* Shadow aliases */
  --shadow-sm: var(--primitive-shadow-sm);
  --shadow-md: var(--primitive-shadow-md);
  --shadow-lg: var(--primitive-shadow-lg);

  /* Duration aliases */
  --duration-fast: var(--primitive-duration-fast);
  --duration-normal: var(--primitive-duration-normal);
  --duration-slow: var(--primitive-duration-slow);
}

/* -----------------------------------------------------------------------------
   TIER 3 — COMPONENT
   Component-scoped tokens. Values reference Tier 2 only.
   ----------------------------------------------------------------------------- */

/* Button */
:root {
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 44px;               /* ≥44 for comfortable pointer targets */
  --btn-padding-x-sm: var(--space-1-5);
  --btn-padding-x-md: var(--space-2);
  --btn-padding-x-lg: var(--space-3);
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--text-sm);
  --btn-font-weight: var(--weight-medium);
  --btn-transition: background-color var(--duration-normal) ease,
                    border-color var(--duration-normal) ease,
                    color var(--duration-normal) ease,
                    box-shadow var(--duration-normal) ease;
}

/* Form field (input / select / textarea / date / time) */
:root {
  --field-height:       40px;
  --field-padding-x:    var(--space-1-5);
  --field-font-size:    var(--text-sm);
  --field-radius:       var(--radius-md);
  --field-border:       var(--color-border-strong);
  --field-border-focus: var(--color-primary);
  --field-bg:           var(--color-surface);
  --field-bg-disabled:  var(--color-bg-subtle);
  /* Placeholder text must remain readable on white (WCAG AA). */
  --field-placeholder:  var(--color-text-muted);
  --field-label-size:   var(--text-sm);
  --field-label-weight: var(--weight-medium);
  --field-helper-size:  var(--text-xs);
  --field-required-mark: var(--color-destructive);   /* red asterisk */
}

/* Badge */
:root {
  --badge-padding-x:   var(--space-1-5);
  --badge-padding-y:   var(--space-0-5);
  --badge-font-size:   var(--text-xs);
  --badge-font-weight: var(--weight-semibold);
  --badge-radius:      var(--radius-full);
}

/* Card / Panel */
:root {
  --card-padding: var(--space-3);
  --card-radius:  var(--radius-lg);
  --card-border:  var(--color-border);
  --card-shadow:  none;                 /* flat; border does the work */
  --card-bg:      var(--color-surface);
}

/* Data table — compact, tabular numerals for all numeric cells */
:root {
  --table-row-height:   44px;
  --table-cell-padding-x: var(--space-2);
  --table-cell-padding-y: var(--space-1);
  --table-header-bg:    var(--color-bg-subtle);
  --table-header-fg:    var(--color-text-muted);
  --table-header-size:  var(--text-xs);
  --table-header-weight: var(--weight-semibold);
  --table-border:       var(--color-border);
  --table-row-hover-bg: var(--color-bg-subtle);
  --table-numeral:      tabular-nums;   /* apply via font-variant-numeric */
}

/* KPI stat (Work Monitor header) */
:root {
  --stat-value-size:   var(--text-3xl);
  --stat-value-weight: var(--weight-semibold);
  --stat-label-size:   var(--text-xs);
  --stat-label-color:  var(--color-text-muted);
}

/* Modal / Dialog */
:root {
  --modal-radius:        var(--radius-xl);
  --modal-shadow:        var(--shadow-lg);
  --modal-bg:            var(--color-surface);
  --modal-header-border: 1px solid var(--color-border);
  --modal-footer-border: 1px solid var(--color-border);
  --modal-padding:       var(--space-4);
}

/* Segmented control (e.g. Unallocated / Allocated) */
:root {
  --segment-bg:          var(--color-bg-subtle);
  --segment-radius:      var(--radius-md);
  --segment-active-bg:   var(--color-surface);
  --segment-active-fg:   var(--color-text);
  --segment-inactive-fg: var(--color-text-muted);
  --segment-active-shadow: var(--shadow-sm);
}

/* Draggable pill (Team Editor shifts / events) */
:root {
  --pill-radius:      var(--radius-md);
  --pill-padding-x:   var(--space-1-5);
  --pill-padding-y:   var(--space-1);
  --pill-shift-bg:    var(--primitive-blue-50);
  --pill-shift-fg:    var(--primitive-blue-900);
  --pill-event-bg:    var(--color-bg-subtle);
  --pill-event-fg:    var(--color-text);
  --pill-grip:        var(--color-text-subtle);
}

/* Calendar cell */
:root {
  --cal-cell-min-h:   88px;
  --cal-cell-radius:  var(--radius-md);
  --cal-cell-border:  var(--color-border);
  --cal-cell-hover:   var(--color-bg-subtle);
  --cal-drop-border:  2px dashed var(--color-primary);   /* drop-target affordance */
}

/* Select — custom chevron (replaces the OS-native arrow so selects match
   inputs across platforms). Chevron colour lives in the SVG asset: muted by
   default, primary on focus. These are icon assets, not themeable tokens. */
:root {
  --select-chevron-gap: 36px;   /* right padding to clear the chevron */
  --select-chevron:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --select-chevron-focus:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Focus ring — global; never remove without a replacement */
:root {
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent);
}