/* ============================================================
   Pro Painting & More: v2 tokens. Bold, trust-first painter brand.
   Blue primary + deep navy + white, with a warm amber CTA for contrast.
   Archivo (display) + Figtree (body).
   ============================================================ */
:root {
  --blue:        #2596D1;                /* brand primary: Curious Blue 3 */
  --blue-bright: oklch(0.74 0.12 236);   /* lighter azure */
  --blue-deep:   oklch(0.50 0.105 242);  /* deep brand blue (dark CTA section) */
  --navy:        oklch(0.28 0.05 244);   /* dark sections, brand-tinted */
  --ink:         oklch(0.21 0.03 244);   /* headings/text */
  --ink-2:       oklch(0.37 0.025 244);
  --paper:       #ffffff;                /* white */
  --paper-2:     #EFF2F3;                /* Porcelain 1 */
  --muted:       oklch(0.53 0.018 244);
  --line:        oklch(0.90 0.008 240);
  --on-dark:     oklch(0.97 0.006 240);
  --on-dark-muted: oklch(0.80 0.012 240);
  /* action color = the brand blue itself (on-brand, no third hue) */
  --cta:         #2596D1;
  --cta-bright:  oklch(0.78 0.115 232);  /* light azure highlight on dark */
  --cta-deep:    oklch(0.50 0.105 242);  /* hover */
  --on-cta:      #ffffff;
  --gold:        oklch(0.80 0.14 85);    /* review stars */

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  --type-2xs:  clamp(0.7rem, 0.66rem + 0.18vw, 0.78rem);
  --type-xs:   clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  --type-sm:   clamp(0.92rem, 0.88rem + 0.24vw, 1.02rem);
  --type-body: clamp(1.02rem, 0.97rem + 0.4vw, 1.18rem);
  --type-lead: clamp(1.2rem, 1.02rem + 0.9vw, 1.7rem);
  --type-h3:   clamp(1.3rem, 1.05rem + 1.3vw, 2rem);
  --type-h2:   clamp(2rem, 1.4rem + 3vw, 3.8rem);
  --type-display: clamp(2.6rem, 1.5rem + 5vw, 5.6rem);
  --type-giant: clamp(2.8rem, 1.5rem + 6vw, 6rem);

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px;
  --space-md: 16px; --space-lg: 24px; --space-xl: 40px;
  --space-2xl: 64px; --space-3xl: 100px; --space-4xl: 150px;

  --maxw: 1280px;
  --gutter: clamp(18px, 4.5vw, 72px);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px oklch(0.2 0.04 250 / .05), 0 12px 32px oklch(0.2 0.04 250 / .08);
  --shadow-lg: 0 24px 60px oklch(0.2 0.04 250 / .18);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }