/* ============================================================
   Echo Fast Transportation — Design Tokens
   Single source of truth for colours, type, spacing, effects.
   Edit a value here → it cascades everywhere in the theme.
   Mirrored from /Design System/tokens/* to keep design and code aligned.
   ============================================================ */

:root {

  /* ===================== COLOUR ===================== */

  /* Brand red — sampled from logo */
  --ef-red-50:  #fdeeec;
  --ef-red-100: #fbdad6;
  --ef-red-200: #f6b3ab;
  --ef-red-300: #f28a7e;
  --ef-red-400: #f0594b;
  --ef-red-500: #ee4035;  /* core */
  --ef-red-600: #d62d22;  /* hover */
  --ef-red-700: #b21f16;  /* pressed / body-size red */
  --ef-red-800: #8c1810;
  --ef-red-900: #6b120c;

  /* Ink / charcoal */
  --ef-ink-900: #0c0e10;
  --ef-ink-800: #14171b;
  --ef-ink-700: #1d2127;
  --ef-ink-600: #2a2f37;

  /* Neutral greys */
  --ef-grey-50:  #f7f8f9;
  --ef-grey-100: #eef0f2;
  --ef-grey-200: #e2e5e9;
  --ef-grey-300: #cdd2d8;
  --ef-grey-400: #a6adb6;
  --ef-grey-500: #7c838d;
  --ef-grey-600: #5b626b;
  --ef-grey-700: #424852;
  --ef-grey-800: #2b3038;
  --ef-grey-900: #181b20;

  --ef-white: #ffffff;

  /* Off-shade brand surfaces — avoid pure #fff / #000 in body content */
  --ef-paper:           #f7f6f3;  /* warm off-white — page background */
  --ef-paper-elevated:  #fbfaf7;  /* lighter off-shade — cards on paper */
  --ef-coal:            #08090a;  /* deeper than ink-900 for richest blacks */

  /* Header dimensions — for sticky offsets, viewport-fit calcs */
  --ef-nav-h:    76px;   /* sticky nav only (topbar scrolls away) */
  --ef-chrome-h: 116px;  /* nav + topbar (initial chrome) */

  /* Semantic */
  --ef-success: #1f9d57;
  --ef-warning: #e8a417;
  --ef-info:    #2f6fed;

  /* Semantic aliases — components reference these, never raw hex */
  /* Surface hierarchy — page is warm off-white, cards stay pure white to pop. */
  --surface-page:      var(--ef-paper);
  --surface-subtle:    var(--ef-grey-50);
  --surface-muted:     var(--ef-grey-100);
  --surface-card:      var(--ef-paper-elevated);  /* cards = lighter off-shade, never pure white */
  --surface-inverse:   var(--ef-ink-800);
  --surface-inverse-2: var(--ef-ink-700);
  --surface-black:     var(--ef-ink-900);

  --text-strong:        var(--ef-ink-900);
  --text-body:          var(--ef-grey-700);
  --text-muted:         var(--ef-grey-500);
  --text-on-dark:       var(--ef-paper);    /* off-white, easier on eyes than #fff */
  --text-on-dark-muted: var(--ef-grey-400);
  --text-accent:        var(--ef-red-500);
  --text-accent-body:   var(--ef-red-700); /* WCAG AA on white */

  --accent:        var(--ef-red-500);
  --accent-hover:  var(--ef-red-600);
  --accent-press:  var(--ef-red-700);
  --accent-tint:   var(--ef-red-50);

  --border-subtle:  var(--ef-grey-200);
  --border-strong:  var(--ef-grey-300);
  --border-on-dark: var(--ef-ink-600);
  --focus-ring:     color-mix(in srgb, var(--ef-red-500) 45%, transparent);

  /* ===================== TYPOGRAPHY ===================== */

  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  --fs-display:  clamp(3.25rem, 5.2vw, 5rem);
  --fs-h1:       clamp(2.5rem, 3.6vw, 3.5rem);
  --fs-h2:       clamp(2rem, 2.6vw, 2.75rem);
  --fs-h3:       1.75rem;
  --fs-h4:       1.375rem;
  --fs-h5:       1.125rem;
  --fs-lead:     1.25rem;
  --fs-body:     1.0625rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-eyebrow:  0.8125rem;
  --fs-stat:     clamp(2.75rem, 4.5vw, 4.25rem);

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.18em;

  /* ===================== SPACING ===================== */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  --section-y:       clamp(56px, 6.5vw, 100px);
  --section-y-tight: clamp(40px, 5vw, 72px);

  --container-max:  1240px;
  --container-wide: 1400px;
  --container-pad:  clamp(20px, 5vw, 64px);

  /* ===================== EFFECTS ===================== */

  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--border-subtle);
  --border-card:     1px solid var(--border-subtle);

  --shadow-xs:  0 1px 2px rgba(12, 14, 16, 0.06);
  --shadow-sm:  0 2px 8px rgba(12, 14, 16, 0.07);
  --shadow-md:  0 10px 28px -8px rgba(12, 14, 16, 0.16);
  --shadow-lg:  0 24px 60px -16px rgba(12, 14, 16, 0.24);
  --shadow-red: 0 12px 30px -10px rgba(238, 64, 53, 0.42);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    520ms;
  --reveal-y:    28px;
}