/* ============================================================
   AMLI — Design tokens
   Source: AMLI Forklifts Design System (Claude Design handoff)
   Machine blue + steel neutrals. Barlow / Barlow Semi Condensed /
   IBM Plex Mono. 4px spacing grid, restrained radii.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Brand: AMLI Navy (dark steel blue) --- */
  --brand-50:  #eef2f6;
  --brand-100: #dbe4ec;
  --brand-200: #b4c6d6;
  --brand-300: #83a0b8;
  --brand-400: #4f7494;
  --brand-500: #2e5273;   /* PRIMARY brand navy */
  --brand-600: #223f59;
  --brand-700: #172c40;

  /* --- Steel: cool industrial neutrals --- */
  --steel-0:   #ffffff;
  --steel-50:  #f5f7f8;
  --steel-100: #e9edf0;
  --steel-200: #d4dbe0;
  --steel-300: #b3bec6;
  --steel-400: #8996a0;
  --steel-500: #626e78;
  --steel-600: #465059;
  --steel-700: #2f373e;
  --steel-800: #1e252b;
  --steel-900: #14181d;   /* ink / darkest surface */

  /* --- Signal blue aliases (links, info) --- */
  --blue-100: var(--brand-100);
  --blue-400: var(--brand-400);
  --blue-500: var(--brand-500);
  --blue-600: var(--brand-600);

  /* --- Semantic: equipment status + system feedback --- */
  --green-100: #d7f0dd;
  --green-500: #2e9e52;   /* Available / success */
  --green-600: #227d40;
  --red-100:   #fbdcda;
  --red-500:   #d23f34;   /* Sold / danger */
  --red-600:   #a82e25;
  --yellow-100: #f9edcd;  /* On hold / warning (status only, not brand) */
  --yellow-500: #c8920a;
  --yellow-700: #7d5c06;

  /* ---- Semantic aliases ---- */
  --brand:            var(--brand-500);
  --brand-hover:      var(--brand-600);
  --brand-press:      var(--brand-700);
  --on-brand:         #ffffff;

  --surface-page:     var(--steel-50);
  --surface-card:     var(--steel-0);
  --surface-sunken:   var(--steel-100);
  --surface-inverse:  var(--steel-900);
  --surface-inverse-2:var(--steel-800);

  --text-strong:      var(--steel-900);
  --text-body:        var(--steel-700);
  --text-muted:       var(--steel-500);
  --text-faint:       var(--steel-400);
  --text-on-inverse:  var(--steel-50);
  --text-on-inverse-muted: var(--steel-400);

  --border:           var(--steel-200);
  --border-strong:    var(--steel-300);
  --border-inverse:   var(--steel-700);

  --link:             var(--brand-500);
  --link-hover:       var(--brand-600);

  --status-available-bg:   var(--green-100);
  --status-available-fg:   var(--green-600);
  --status-hold-bg:        var(--yellow-100);
  --status-hold-fg:        var(--yellow-700);
  --status-sold-bg:        var(--red-100);
  --status-sold-fg:        var(--red-600);

  --success: var(--green-500);
  --danger:  var(--red-500);
  --warning: var(--yellow-500);

  --accent-bg: var(--brand-100);
  --accent-fg: var(--brand-700);

  /* ---- Typography ---- */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-display: 800;

  --fs-display-xl: 64px;
  --fs-display-lg: 48px;
  --fs-display-md: 36px;
  --fs-h1: 30px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-mono: 13px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.08em;
  --ls-normal: 0;

  /* ---- Spacing / radius / shadow / motion ---- */
  --sp-0: 0;
  --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;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --bw-1: 1px;
  --bw-2: 2px;

  --shadow-xs: 0 1px 2px rgba(20, 24, 29, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 24, 29, 0.10), 0 1px 2px rgba(20, 24, 29, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 24, 29, 0.10), 0 2px 4px rgba(20, 24, 29, 0.06);
  --shadow-lg: 0 12px 28px rgba(20, 24, 29, 0.14), 0 4px 8px rgba(20, 24, 29, 0.06);
  --focus-ring: 0 0 0 3px rgba(43, 106, 163, 0.40);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --container: 1200px;
  --header-h: 68px;
}