/* ============================================================
   CFTP Oshawa — Design tokens
   Brand: CFTP red #D1191F · CFTP blue #208AC5 on warm paper.
   ============================================================ */
:root {
  /* Brand */
  --red:        #D1191F;
  --red-dark:   #AB1419;
  --red-deep:   #7E0E12;
  --red-soft:   #FBEDEE;
  --blue:       #208AC5;
  --blue-dark:  #166B9C;
  --blue-deep:  #0D4A6C;
  --blue-soft:  #EAF4FA;

  /* Neutrals */
  --ink:        #12181E;
  --ink-soft:   #2A3440;
  --slate:      #45525E;
  --muted:      #5C6A76;
  --paper:      #FFFFFF;
  --paper-warm: #F7F5F0;
  --mist:       #EDF1F4;
  --line:       #E2E7EB;
  --line-soft:  #EDF0F2;

  /* Semantic */
  --success: #1E7A46;
  --focus:   #208AC5;

  /* Type */
  --font-display: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --fs-hero:    clamp(2.4rem, 1.35rem + 4.4vw, 5.2rem);
  --fs-xl:      clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --fs-lg:      clamp(1.55rem, 1.1rem + 1.9vw, 2.6rem);
  --fs-md:      clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

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

  /* Elevation (sparing) */
  --shadow-sm: 0 1px 2px rgba(18, 24, 30, 0.06), 0 1px 6px rgba(18, 24, 30, 0.05);
  --shadow-md: 0 4px 16px rgba(18, 24, 30, 0.10), 0 1px 4px rgba(18, 24, 30, 0.06);
  --shadow-lg: 0 16px 48px rgba(18, 24, 30, 0.16);

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 80px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;

  /* Z */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}