/* ==========================================================================
   Humber Bay Supply Co. — Design Tokens
   Single source of truth for colour, type, spacing, radii, shadows, motion.
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Ink (cool charcoal-navy) ------------------------------------------ */
  --ink-900: #0B1622;
  --ink-800: #0E1F33;
  --ink-700: #16304A;
  --ink-600: #274563;
  --ink-500: #3F5B77;
  --ink-400: #5F7891;
  --ink-300: #8A9DB1;
  --ink-200: #B9C6D3;
  --ink-100: #DDE4EB;
  --ink-50:  #EEF2F6;

  /* --- Paper & surfaces --------------------------------------------------- */
  --paper:     #F7F4EE;
  --paper-2:   #EFEAE1;
  --surface:   #FFFFFF;
  --surface-2: #FBF9F5;
  --line:        rgba(14, 31, 51, 0.10);
  --line-strong: rgba(14, 31, 51, 0.18);

  /* --- Accent: warm brass / copper --------------------------------------- */
  --accent:      #C97F35;
  --accent-600:  #B36A24;
  --accent-700:  #8F521A;
  --accent-soft: #F6E7D4;
  --accent-ink:  #FFF8EF;

  /* --- Lake: deep cool blue for gradients --------------------------------- */
  --lake:      #1E4F7A;
  --lake-600:  #163C5E;
  --lake-soft: #DDE9F4;

  /* --- Status --------------------------------------------------------------- */
  --success: #2E8B57;
  --warn:    #C98A1B;
  --danger:  #C0392B;

  /* --- Type ------------------------------------------------------------------ */
  --font-display: 'Sora', '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, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.2rem, 1.05rem + 0.6vw, 1.375rem);
  --text-2xl:  clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  --text-4xl:  clamp(2.25rem, 1.75rem + 2.2vw, 3.25rem);
  --text-5xl:  clamp(2.75rem, 2rem + 3.2vw, 4.25rem);
  --text-6xl:  clamp(3.25rem, 2.25rem + 4.5vw, 5.5rem);

  /* --- Space (4px base) ------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* --- Radii ------------------------------------------------------------------ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* --- Shadows ---------------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(14, 31, 51, 0.06), 0 1px 1px rgba(14, 31, 51, 0.04);
  --shadow-md:   0 6px 18px -6px rgba(14, 31, 51, 0.14), 0 2px 6px rgba(14, 31, 51, 0.06);
  --shadow-lg:   0 24px 48px -16px rgba(14, 31, 51, 0.22), 0 8px 20px -8px rgba(14, 31, 51, 0.10);
  --shadow-glow: 0 0 0 1px rgba(201, 127, 53, 0.35), 0 12px 32px -8px rgba(201, 127, 53, 0.35);

  /* --- Motion ------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;

  /* --- Layout ------------------------------------------------------------------ */
  --header-h: 72px;
  --container: 1240px;
  --container-wide: 1440px;
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }
}