/* ==========================================================================
   KOBIL — Design Tokens (from Figma variables, D-Homepage)
   ========================================================================== */

:root {
  /* ---- Colors: System / Navy scale ---- */
  --navy: #11244a;        /* System/100% — primary text, dark areas */
  --navy-80: #3d4c6a;     /* System/80% */
  --navy-70: #586680;     /* System/70% — secondary text */
  --navy-65: #7b89a2;     /* System/65% — placeholder + fine print */
  --navy-60: #b9c1d1;     /* System/60% — disabled / subtle icons */
  --navy-50: #d5d9e3;     /* System/50% — input borders */
  --navy-40: #e2e7f2;     /* System/40% — lines, borders */
  --navy-30: #eff2f8;     /* System/30% — light areas */
  --navy-20: #f5f7fc;     /* System/20% — lightest areas / section background */

  /* ---- Colors: Brand ---- */
  --blue: #1046cf;        /* Primary/Dark Blue — accents (was Go Blue #2962f6; buttons keep it via --btn-blue) */
  --btn-blue: #2962f6;    /* Primary/Go Blue — button fills ONLY */
  --blue-dark: #1046cf;   /* Primary/Dark Blue — years, KOBIL wordmark in headings */
  --blue-light: #789dfc;  /* Accent — nav tagline, footer eyebrow (Aug 2026 redesign) */
  --white: #ffffff;
  --pink: #ca80f4;        /* Secondary/Pink */
  --green: #1dac76;       /* Secondary/Green */
  --red: #eb5757;         /* Semantic/Red */

  /* ---- Colors: Navy 900 (footer / darkest surface, Aug 2026 redesign) ---- */
  --navy-900: #0b0c1f;

  /* ---- Typography: mono (nav tagline, footer eyebrow) ---- */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Typography: serif display (404 headline, Aug 2026 redesign) ---- */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* ---- Transparencies ---- */
  --white-70: rgba(255, 255, 255, 0.7);
  --white-20: rgba(255, 255, 255, 0.2);
  --black-10: rgba(35, 41, 53, 0.1);
  --black-70: rgba(35, 41, 53, 0.7);

  /* ---- Typography ---- */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Sizes (desktop): H1 50/62 · H2 40/50 · H4 28/36 · Title2 20/26 ·
     Title3 18/24 · Body L 18/26 · Body M 16/23 · Body S 14/20 · Tagline 12/18 */

  /* ---- Radii ---- */
  --radius-card: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 100px;

  /* ---- Layout ---- */
  --page-max: 1440px;
  --page-pad: 40px;
  --content-max: 1360px;
  --section-gap: 20px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.25s;
}