/* =============================================================
   INTER-COX · CORE TOKENS
   Colors + Typography + Spacing + Radius + Shadow
   ============================================================= */

/* ---------- Fonts -------------------------------------------- */

/* KALEXA — Display only. Used for the logotype and rare headline
   moments. NEVER use for body or UI copy. */
@font-face {
  font-family: "Kalexa";
  src: url("fonts/Kalexa-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalexa";
  src: url("fonts/Kalexa-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalexa";
  src: url("fonts/Kalexa-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalexa";
  src: url("fonts/Kalexa-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalexa";
  src: url("fonts/Kalexa-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalexa";
  src: url("fonts/Kalexa-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* EINA — Workhorse. Headings, UI, body, captions, signage. */
@font-face {
  font-family: "Eina";
  src: url("fonts/Eina-01-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eina";
  src: url("fonts/Eina-01-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Eina";
  src: url("fonts/Eina-01-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eina";
  src: url("fonts/Eina-01-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Eina";
  src: url("fonts/Eina-01-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eina";
  src: url("fonts/Eina-01-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Eina";
  src: url("fonts/Eina-01-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eina";
  src: url("fonts/Eina-01-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------- */
:root {
  /* ── Brand color ──────────────────────────────────────────── */
  /* The single brand color. Mandatory on white. Hex must remain
     #E84529 in print and digital — do not alter.
     Pantone Coated 179 C is the print reference (per brand book). */
  --icx-red: #E84529;
  --icx-red-hover: #D03A20;        /* press / hover only */
  --icx-red-tint-08: #FDE9E4;      /* surface wash, very rare */
  --icx-red-tint-16: #F9CDC1;
  --icx-red-shade-700: #B12C16;    /* high-contrast on light gray */

  /* ── Neutral ramp (Swiss / Aicher) ────────────────────────── */
  --icx-black: #0B0B0C;            /* near-black ink */
  --icx-ink-900: #18181B;
  --icx-ink-800: #27272A;
  --icx-ink-700: #3F3F46;
  --icx-ink-600: #52525B;          /* default body on white */
  --icx-ink-500: #71717A;          /* secondary text */
  --icx-ink-400: #A1A1AA;          /* muted, captions */
  --icx-ink-300: #D4D4D8;          /* dividers, hairlines */
  --icx-ink-200: #E4E4E7;          /* faint dividers */
  --icx-ink-100: #F4F4F5;          /* subtle surface */
  --icx-ink-50:  #FAFAFA;          /* page tint */
  --icx-white:   #FFFFFF;          /* mandatory fleet base */

  /* ── Semantic surfaces ────────────────────────────────────── */
  --bg:            var(--icx-white);
  --bg-subtle:     var(--icx-ink-50);
  --bg-elevated:   var(--icx-white);
  --bg-inverse:    var(--icx-black);
  --bg-brand:      var(--icx-red);

  /* ── Semantic text ────────────────────────────────────────── */
  --fg:            var(--icx-ink-900);   /* primary ink */
  --fg-muted:      var(--icx-ink-600);   /* body / paragraph */
  --fg-subtle:     var(--icx-ink-500);   /* meta / captions */
  --fg-faint:      var(--icx-ink-400);   /* placeholder */
  --fg-on-brand:   var(--icx-white);
  --fg-on-inverse: var(--icx-white);
  --fg-brand:      var(--icx-red);

  /* ── Borders / dividers ───────────────────────────────────── */
  --border:        var(--icx-ink-200);
  --border-strong: var(--icx-ink-300);
  --border-ink:    var(--icx-black);     /* used for "Swiss" rules */
  --border-brand:  var(--icx-red);

  /* ── Operational semantics (for status/UI only) ───────────── */
  --ok:      #1F7A4D;        /* "on time" / "delivered" */
  --warn:    #B36B00;        /* "attention" — never alarming */
  --danger:  #B22222;        /* "ADR" / "delay" */
  --cold:    #0E6BA8;        /* temperature-controlled */

  /* ── Type scale (modular, Eina) ───────────────────────────── */
  --font-display: "Kalexa", "Eina", system-ui, sans-serif;
  --font-sans:    "Eina", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  --fs-12: 0.75rem;     /* 12 — micro (meta, plate-code) */
  --fs-14: 0.875rem;    /* 14 — UI small */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — lead */
  --fs-20: 1.25rem;     /* 20 — h5 */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-32: 2rem;        /* 32 — h3 */
  --fs-44: 2.75rem;     /* 44 — h2 */
  --fs-64: 4rem;        /* 64 — h1 */
  --fs-96: 6rem;        /* 96 — display */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-extreme:  0.18em;   /* signage caps */

  /* ── Spacing (4 / 8 grid; Swiss column) ───────────────────── */
  --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;

  /* ── Radii (sparing — Swiss prefers crisp) ────────────────── */
  --r-0: 0px;            /* default for cards, panels */
  --r-1: 2px;            /* inputs / chips */
  --r-2: 4px;            /* buttons */
  --r-pill: 999px;

  /* ── Elevation (almost flat) ──────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(11,11,12,0.06), 0 1px 2px rgba(11,11,12,0.04);
  --shadow-2: 0 2px 6px rgba(11,11,12,0.06), 0 1px 2px rgba(11,11,12,0.04);
  --shadow-3: 0 8px 24px rgba(11,11,12,0.10), 0 2px 6px rgba(11,11,12,0.06);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   120ms;
  --d-base:   200ms;
  --d-slow:   400ms;

  /* ── Grid ─────────────────────────────────────────────────── */
  --grid-gutter: 24px;
  --grid-columns: 12;
  --container: 1200px;
}

/* ---------- Reset minimums ----------------------------------- */
html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type classes ---------------------------- */
.icx-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-96);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.icx-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.icx-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-44);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.icx-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
}
.icx-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
.icx-h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
}
.icx-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.icx-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.icx-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}
.icx-meta {
  /* For metadata, plate numbers, signage labels — ALL CAPS, tracked. */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-extreme);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.icx-eyebrow {
  /* The signature "kicker" above section headlines. */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-extreme);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.icx-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0;
}