/* Infinite Horizon Logistics — design tokens v1.0 (Oct 2026) */

:root {
  /* Brand colors */
  --ihl-indigo-night: #16215C;   /* primary; white text on it = 14.93:1 */
  --ihl-signal-blue:  #2F6BFF;   /* accent; 4.49:1 on white -> large text (18px+ bold / 24px+) & UI only */
  --ihl-cyan-pulse:   #32C5F4;   /* highlight; use on Indigo Night (7.42:1), never as text on white */
  --ihl-ice:          #F2F5FB;   /* light surface */
  --ihl-steel:        #64708A;   /* secondary text; 4.96:1 on white, 4.55:1 on Ice */

  /* Functional */
  --ihl-ink:          #1A2238;   /* body text; 15.79:1 on white */
  --ihl-link:         #1F56E0;   /* links & small accent text; 6.05:1 on white, 5.55:1 on Ice */
  --ihl-link-hover:   #16215C;
  --ihl-white:        #FFFFFF;
  --ihl-border:       #DDE2EA;
  --ihl-focus-ring:   #2F6BFF;

  /* Semantic aliases */
  --color-bg:            var(--ihl-white);
  --color-surface:       var(--ihl-ice);
  --color-surface-dark:  var(--ihl-indigo-night);
  --color-text:          var(--ihl-ink);
  --color-text-muted:    var(--ihl-steel);
  --color-text-inverse:  var(--ihl-white);
  --color-primary:       var(--ihl-indigo-night);
  --color-accent:        var(--ihl-signal-blue);
  --color-highlight:     var(--ihl-cyan-pulse);
  --color-link:          var(--ihl-link);

  /* Typography */
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  --fs-h1: 3rem;      /* 48px, Montserrat 800 */
  --fs-h2: 2rem;      /* 32px, Montserrat 700 */
  --fs-h3: 1.5rem;    /* 24px, Montserrat 600 */
  --fs-body: 1rem;    /* 16px, Inter 400 */
  --fs-small: 0.875rem; /* 14px, Inter 500 */
  --fs-label: 0.75rem;  /* 12px, Inter 600, uppercase */
  --ls-label: 0.08em;
  --lh-tight: 1.15; --lh-body: 1.6;

  /* Radii (logo tile = 14/64 ≈ 22% of its size) */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  /* Shadows (Indigo-tinted) */
  --shadow-sm: 0 1px 2px rgba(22, 33, 92, 0.08);
  --shadow-md: 0 4px 12px rgba(22, 33, 92, 0.10), 0 1px 3px rgba(22, 33, 92, 0.06);
  --shadow-lg: 0 12px 32px rgba(22, 33, 92, 0.14), 0 2px 6px rgba(22, 33, 92, 0.08);
  --shadow-focus: 0 0 0 3px rgba(47, 107, 255, 0.35);
}