/* ==========================================================================
   Magnetic Hub Plug - design tokens
   Industrial trucking premium: ink black, steel blue, safety red.
   ========================================================================== */

:root {
  /* --- brand palette --- */
  --ink-900: #07090b;   /* page base */
  --ink-850: #0b0e12;
  --ink-800: #101317;   /* panel */
  --ink-750: #161a20;   /* raised card */
  --ink-700: #1d232b;   /* hairline-lit surface */
  --steel-600: #2b3744;
  --steel-500: #3d5269;
  --steel-400: #5b7da8; /* steel highlight */
  --steel-300: #8fa9c8;

  --red-600: #c5281c;
  --red-500: #e23b2e;   /* primary action / safety accent */
  --red-400: #ff5347;
  --amber-500: #f5a623; /* warning / indicator */
  --green-500: #28c76f; /* pass / fitment ok */

  --paper: #f4f6f8;     /* light section bg */
  --paper-2: #e7ebef;

  /* --- text --- */
  --text-hi: #f4f6f8;
  --text: #d4dae1;
  --text-mut: #9aa4b0;
  --text-faint: #687180;
  --text-ink: #0b0e12;        /* on light surfaces */
  --text-ink-mut: #46505c;

  /* --- lines & glows --- */
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.16);
  --line-ink: rgba(7,9,11,.12);
  --glow-red: 0 0 0 1px rgba(226,59,46,.45), 0 8px 30px -8px rgba(226,59,46,.55);

  /* --- type --- */
  --font-display: 'Saira Condensed','Oswald','Arial Narrow','Helvetica Neue',sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', 'Roboto Mono', Menlo, monospace;

  --fs-eyebrow: .8rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.25rem;
  --fs-h3: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 3vw, 3.4rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 5.2vw, 5.6rem);
  --fs-display: clamp(3rem, 1.4rem + 7vw, 7rem);

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-body: 1.6;

  --tracking-wide: .14em;
  --tracking-mega: .28em;

  /* --- space (8pt) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --s-11: 160px;

  /* --- structure --- */
  --container: 1200px;
  --container-wide: 1380px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-s: 6px;
  --radius: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  /* --- elevation --- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 12px 30px -12px rgba(0,0,0,.6);
  --shadow-3: 0 30px 70px -24px rgba(0,0,0,.7);

  /* --- motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .18s;
  --dur-2: .36s;
  --dur-3: .6s;

  /* --- z --- */
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;

  color-scheme: dark;
}