/* ==========================================================================
   OKTAY CABINETS — DESIGN TOKENS
   ==========================================================================
   Brand palette extracted programmatically from images/logo.png using
   Pillow + KMeans clustering (k=5), filtered to exclude near-white /
   near-black / transparent pixels.

   Cluster results (share of coloured pixels):
     #D13636  76.3%  -> primary brand red (dominant logo colour)
     #BC383A  12.3%  -> anti-aliasing blend, folded into primary
     #A54E4D   6.5%  -> anti-aliasing blend, folded into primary
     #3C3A39   3.2%  -> logo wordmark black, folded into --color-ink
     #DE807F   1.7%  -> anti-aliasing blend, folded into primary-light
     near-black avg: rgb(13,11,12) -> base for --color-ink

   The logo is functionally monochrome (red + near-black), so --color-accent
   is a complementary warm-timber amber, chosen to support the brand's
   "precision machinery meets warm timber interiors" positioning.

   Contrast verified (WCAG AA, see build notes):
     primary on white........... 4.89:1  (passes AA body text)
     primary-dark on white...... 7.19:1  (passes AAA body text)
     ink on white / surface..... 18.2:1 / 16.7:1
     body on white / surface.....9.33:1 / 8.57:1
     muted on white.............. 4.56:1 (passes AA body text)
     accent on white............. 3.04:1 (large text / icons / fills only)
   ========================================================================== */

:root {
  /* ---- Brand colour ---- */
  --color-primary: #D13636;
  --color-primary-dark: #A32A2A;
  --color-primary-light: #E8726E;
  --color-primary-50: #FCECEA;
  --color-primary-100: #F6D3D0;

  --color-accent: #C8862E;
  --color-accent-dark: #9C6620;
  --color-accent-light: #E4B36B;
  --color-accent-50: #FBF1E1;

  /* ---- Neutrals ---- */
  --color-ink: #18100F;
  --color-body: #4A4644;
  --color-muted: #746F6C;
  --color-line: #E4E0DC;
  --color-line-strong: #D2CCC6;
  --color-surface: #F7F5F2;
  --color-surface-alt: #F0ECE7;
  --color-white: #FFFFFF;

  /* ---- Dark section colours (footer, CTA bands) ---- */
  --color-dark: #1D1917;
  --color-dark-alt: #262120;

  /* ---- Spacing scale ---- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;

  /* ---- Fluid typography ---- */
  --font-display: "Sora", "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;

  --fs-h1: clamp(2.5rem, 2rem + 2.4vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.7rem + 1.5vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.35rem + 0.75vw, 2.1rem);
  --fs-h4: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  --fs-lead: clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem);
  --fs-body: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-stat: clamp(2.25rem, 1.9rem + 1.6vw, 3.75rem);

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

  /* ---- Shadows (soft, layered) ---- */
  --shadow-sm: 0 1px 2px rgba(24, 16, 15, 0.06), 0 1px 1px rgba(24, 16, 15, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(24, 16, 15, 0.10), 0 2px 6px -2px rgba(24, 16, 15, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(24, 16, 15, 0.18), 0 8px 16px -8px rgba(24, 16, 15, 0.10);
  --shadow-xl: 0 32px 64px -16px rgba(24, 16, 15, 0.24), 0 12px 24px -8px rgba(24, 16, 15, 0.12);
  --shadow-primary: 0 14px 28px -8px rgba(209, 54, 54, 0.35);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 200ms;
  --transition-base: 320ms;
  --transition-slow: 500ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --header-height: 88px;
  --header-height-scrolled: 72px;
}