/* =========================================================
   01-VARIABLES.CSS
   The single source of truth for the brand.
   Change values here to update the entire site.
   ========================================================= */

:root {
  /* ---------- BRAND COLORS ---------- */
  --color-primary: #E62C1B;          /* Ruby red — CTAs, accents, highlights */
  --color-primary-dark: #C4241482;   /* Hover state (with alpha for depth) */
  --color-primary-solid-dark: #B81E10;
  --color-secondary: #222639;        /* Deep navy — primary text, dark sections */
  --color-secondary-light: #2E334A;

  /* ---------- NEUTRALS ---------- */
  --color-bg: #FFFFFF;
  --color-surface: #F7F7F8;          /* Light gray for alternating sections */
  --color-surface-2: #EFEFF2;
  --color-border: #E6E6EC;
  --color-border-strong: #C9C9D2;
  --color-text: #222639;
  --color-text-muted: #6B6E7C;
  --color-text-inverse: #FFFFFF;

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

  /* Type scale — modular, based on 1.25 ratio */
  --fs-xs: 0.75rem;      /* 12px  — labels, meta */
  --fs-sm: 0.875rem;     /* 14px  — small text */
  --fs-base: 1rem;       /* 16px  — body */
  --fs-md: 1.125rem;     /* 18px  — lead paragraphs */
  --fs-lg: 1.5rem;       /* 24px  — subheadings */
  --fs-xl: 2rem;         /* 32px  — H3 */
  --fs-2xl: 2.75rem;     /* 44px  — H2 */
  --fs-3xl: 3.75rem;     /* 60px  — H1 */
  --fs-4xl: 5rem;        /* 80px  — hero display */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---------- SPACING ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --container-narrow: 880px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- BORDERS & RADII ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 500ms;

  /* ---------- ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(34, 38, 57, 0.06);
  --shadow-md: 0 8px 24px rgba(34, 38, 57, 0.08);
  --shadow-lg: 0 24px 60px rgba(34, 38, 57, 0.12);

  /* ---------- SIZING ---------- */
  --header-h: 76px;
}

/* Responsive type scale for mobile */
@media (max-width: 768px) {
  :root {
    --fs-3xl: 2.5rem;   /* 40px */
    --fs-4xl: 3rem;     /* 48px */
    --fs-2xl: 2rem;     /* 32px */
    --fs-xl: 1.5rem;
    --space-16: 5rem;
    --space-20: 6rem;
    --header-h: 68px;
  }
}