/* Self-hosted fonts (no third-party request). Latin subset only. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/nunito-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/nunito-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/outfit-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/outfit-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/outfit-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Happy Bubbles Car Wash — BRAND TOKENS
   This is the single source of truth for color, type, spacing, and buttons.
   /brand-guide displays these exact variables. Every page consumes them.
   Change a value here, never page by page.
   Colors sampled from images/logo/happy-bubbles-logo.png (2026-09-04).
   ========================================================================== */

:root {
  /* ---- Colors: one job each ---- */
  --color-primary:        #1AB1EA; /* Bubble Blue — backgrounds, motifs, icons. NEVER under white text (2.46:1). */
  --color-secondary:      #00558E; /* Navy — headings, dark sections, footer, secondary button. */
  --color-cta:            #E0141E; /* Happy Red — primary button ONLY. 4.90:1 with white. */
  --color-accent:         #FFE200; /* Sponge Yellow — small highlights only. Always with navy/ink text. */
  --color-ink:            #14213A; /* Body text. */
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #EAF7FD; /* Sky Tint — alternating sections. */

  /* Shades — states of the colors above, not new roles */
  --color-cta-hover:      #C41118; /* Happy Red pressed/hover */
  --color-secondary-deep: #003A63; /* Navy deep — footer ground, hero base under video */
  --color-primary-tint:   #BFE9F9; /* Bubble Blue at 30% over white — bubble motifs, dividers */
  --color-ink-soft:       #4A5568; /* Muted body text, captions. 7.5:1 on white. */
  --color-line:           #D6E9F2; /* Borders, dividers */
  --color-focus:          #FFE200; /* Focus ring on dark. On light, the ring is navy. */
  --color-open:           #1F7A3A; /* "Open now" status text on white. 4.6:1. Status is always also spelled out. */
  --color-open-on-dark:   #9BE7B0; /* "Open now" on navy. */

  /* ---- Typography ---- */
  --font-display: 'Outfit', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; /* switched from Fredoka 2026-09-04 — user asked for a less cartoonish, more current feel */
  --font-body:    'Nunito', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.875rem; /* 14px — captions and fine print ONLY */
  --text-base: 1rem;     /* 16px — mobile body floor */
  --text-md:   1.125rem; /* 18px — desktop body */
  --text-lg:   1.375rem; /* 22px */
  --text-xl:   1.75rem;  /* 28px */
  --text-2xl:  2.25rem;  /* 36px */
  --text-3xl:  2.75rem;  /* 44px */
  --text-4xl:  3.5rem;   /* 56px */
  --text-5xl:  4.5rem;   /* 72px — hero h1 on desktop only */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  /* ---- Spacing scale: the only values allowed ---- */
  --space-1: 0.5rem;  /* 8  */
  --space-2: 1rem;    /* 16 */
  --space-3: 1.5rem;  /* 24 */
  --space-4: 2rem;    /* 32 */
  --space-5: 3rem;    /* 48 */
  --space-6: 4rem;    /* 64 */
  --space-7: 6rem;    /* 96 */

  --section-pad: var(--space-7); /* desktop */
  --container:   72rem;          /* 1152px */
  --gutter:      var(--space-3);

  /* ---- Shape & motion ---- */
  --radius-pill: 999px;
  --radius-lg:   1.5rem;
  --radius-md:   1rem;
  --radius-sm:   0.5rem;
  --shadow-soft: 0 10px 30px rgba(0, 85, 142, 0.12);
  --shadow-lift: 0 16px 40px rgba(0, 85, 142, 0.18);
  --ease:        cubic-bezier(.2,.8,.2,1);
  --dur:         220ms;

  /* ---- Buttons: two styles, identical geometry ---- */
  --btn-pad-y:   0.9rem;
  --btn-pad-x:   1.75rem;
  --btn-radius:  var(--radius-pill);
  --btn-font:    var(--font-display);
  --btn-size:    1.0625rem; /* 17px */
  --btn-weight:  700;
  --btn-border:  2px;

  color-scheme: light;
}

/* Mobile tightens proportionally — never inherits desktop spacing */
@media (max-width: 47.99rem) {
  :root {
    --section-pad: 3.5rem; /* 56px */
    --gutter: var(--space-2);
    --text-5xl: 2.75rem;  /* 44 */
    --text-4xl: 2.5rem;   /* 40 */
    --text-3xl: 2.25rem;  /* 36 */
    --text-2xl: 1.75rem;  /* 28 */
    --text-xl:  1.5rem;   /* 24 */
    --text-lg:  1.25rem;  /* 20 */
    --text-md:  1rem;     /* body floor is 16px */
  }
}