/* ==========================================================================
   BREEZY CONVENIENCE — Mobile Laundry Service
   Design tokens. Loaded first; every other stylesheet reads from here.

   ---------------------------------------------------------------------
   VISION BOARD
   ---------------------------------------------------------------------
   1. PERSONALITY — Calm, capable, quietly premium. This is a service where
      a stranger takes your clothes away in their vehicle; the site has to
      feel organised and accountable before it feels stylish. Editorial
      restraint, not domestic cheerfulness. No bubbles, no cartoon suds.

   2. PALETTE — Deep cool ink on fresh-linen off-white, with one accent:
      a clear sky blue. Neutrals lean very slightly cool (the opposite of
      the Danichi house palette) because "clean" reads cool, not warm.
      Mint appears only as a status colour — confirmations, in-area checks —
      never as decoration.

   3. TYPE PAIRING — DM Sans alone, carried by weight and tracking rather
      than by a second family. 300 for large display, 400 for micro-caps.
      The contrast is the point: 8rem headlines against 0.6rem eyebrows at
      +.28em tracking.

   4. HERO FORMAT — Full-bleed photograph, dark scrim, headline in clipped
      per-line masks. The headline states the business model in plain words
      because the entire conversion problem is that people assume "laundry
      service" means a building they drive to.

   5. IMAGE STYLE — Real, domestic, daylight. Folded laundry, linen texture,
      doorsteps, a vehicle. Sourced from Pexels. Never a stock "smiling
      professional". Every image carries at least one motion treatment.

   6. ANIMATION INTENSITY — Medium. Lenis smooth scroll, clipped text
      reveals, parallax bands, counters. Fully disabled under
      prefers-reduced-motion — the booking funnel must work without it.

   7. SECTION STRUCTURE — Alternating light and dark tones, never two of
      the same in a row. Hairline 1px grid dividers instead of card borders.

   8. CARD LANGUAGE — Square corners, no radius anywhere except the two
      genuinely round things (a status dot, a stepper). Cards separate by
      1px gaps over a grey grid background, not by outlines or shadows.

   9. ONE SENTENCE — "The laundromat that comes to you, run like a
      professional service business."
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

:root {
  /* ---- Core palette ---- */
  --ink:      #0F1417;   /* deep near-black, cool-leaning. Never #000 */
  --ink-2:    #161C20;   /* raised dark surface */
  --ink-3:    #1E262B;   /* dark surface, third level */
  --white:    #ffffff;
  --ground:   #F7F7F5;   /* fresh-linen off-white — the default page tone */
  --light:    #FBFBFA;

  /* ---- Neutral ramp (cool-leaning) ---- */
  --g100:     #E6E7E5;   /* hairline dividers on light */
  --g300:     #B4B7B4;
  --g500:     #85898A;
  --g700:     #3E4446;   /* hairline dividers on dark */

  /* ---- Accent ---- */
  --breeze:   #2E86C8;   /* the single accent: eyebrows, rules, focus, active */
  --breeze-2: #1F6BA6;   /* hover / pressed */
  --breeze-w: #6FB4E4;   /* accent on dark grounds, for contrast */

  /* ---- Status only. Not decorative. ---- */
  --mint:     #3E9C82;
  --mint-l:   #EAF5F1;
  --warn:     #B5761F;
  --warn-l:   #FBF3E6;
  --error:    #B4402F;
  --error-l:  #FBEDEB;

  /* ---- Type ---- */
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --max:     1400px;
  --max-nar: 900px;
  --gutter:  clamp(1.5rem, 5vw, 5rem);

  /* ---- Motion ---- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: .25s;
  --dur-med:  .5s;
  --dur-slow: .9s;

  /* ---- Elevation. Used sparingly — only on floating UI (drawer, toast,
         sticky booking summary). Flat surfaces stay flat. ---- */
  --shadow-drawer: 0 0 60px rgba(15, 20, 23, .18);
  --shadow-float:  0 8px 30px rgba(15, 20, 23, .12);

  --header-h: 72px;
}

/* Reduced motion is honoured structurally: the duration tokens go to zero,
   so every transition built on them stops. main.js additionally skips Lenis
   and short-circuits every ScrollTrigger. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .01ms;
    --dur-med:  .01ms;
    --dur-slow: .01ms;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}