/* ==========================================================================
   Continental Freight — Design Tokens
   Single source of truth for colour, type, space, layout, motion.
   ========================================================================== */

:root {
  /* --- Colour: ink & navy ------------------------------------------------ */
  --ink:        #0C1015;
  --navy-900:   #06182E;
  --navy-800:   #0B2545;   /* primary brand */
  --navy-700:   #13315C;
  --navy-600:   #1C4B82;
  --navy-200:   #B7C2D0;   /* light navy — hover borders */
  --navy-100:   #DCE3EC;

  --steel-600:  #3B4A59;
  --steel-500:  #4A5C6E;   /* secondary text on light (AA) */
  --steel-400:  #6B7A8A;   /* tertiary / large only */

  --line:       #E2E7EC;   /* hairline */
  --line-strong:#CDD5DE;
  --mist-100:   #F5F7FA;   /* light surface */
  --mist-50:    #FAFBFC;
  --white:      #FFFFFF;

  --brass-600:  #B08A38;
  --brass-500:  #C8A24B;   /* ACCENT — decorative only */
  --brass-300:  #E2C98A;

  /* --- Semantic roles ---------------------------------------------------- */
  --bg:                  var(--white);
  --bg-muted:            var(--mist-100);
  --bg-dark:             var(--navy-800);
  --bg-darker:           var(--navy-900);
  --text:                var(--ink);
  --text-secondary:      var(--steel-500);
  --text-invert:         var(--white);
  --text-invert-soft:    #AEBCCB;   /* AA on navy */
  --accent:              var(--brass-500);
  --focus:               var(--brass-500);

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5rem);
  --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body:    1.62;
  --tracking-display: -0.022em;
  --tracking-tight:   -0.012em;
  --tracking-eyebrow:  0.14em;

  --measure: 68ch;
  --measure-narrow: 54ch;

  /* --- Spacing (8-pt base) ----------------------------------------------- */
  --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;
  --space-12: 192px;

  /* --- Layout ------------------------------------------------------------ */
  --container:        1280px;
  --container-wide:   1440px;
  --container-narrow: 880px;
  --gutter:    clamp(20px, 5vw, 64px);
  --section-y: clamp(96px, 12vh, 160px);
  --header-h:  76px;

  /* --- Radius ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Elevation (soft, restrained) -------------------------------------- */
  --shadow-1: 0 1px 2px rgba(12, 16, 21, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(11, 37, 69, 0.16);
  --shadow-3: 0 24px 60px -20px rgba(6, 24, 46, 0.30);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:   160ms;
  --dur:        240ms;
  --dur-slow:   480ms;
  --dur-reveal: 760ms;

  /* --- Z-index ----------------------------------------------------------- */
  --z-base:    1;
  --z-overlay: 150;
  --z-header:  100;
  --z-drawer:  200;
}