/* ============================================================
   Auto Spa Detailing design tokens
   Light is the default. The brand's black, electric blue and chrome come from the logo:
   blue #00b8f8 to #0078f8, chrome #f8f8f8 to #c0c0c0, on black.
   Dark bands (the header, hero, How it works, the footer) take the class "dark", which sets the
   same tokens as the dark theme, so everything inside them just works.
   theme.js sets data-scheme="light" | "dark" on <html> from the visitor's choice (or their device).
   Every text colour here is 4.5:1 or better on the surfaces it sits on, in both themes.
   ============================================================ */
:root {
  color-scheme: light;

  /* type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: .78125rem;     /* 12.5 */
  --fs-sm: .875rem;       /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md: 1.0625rem;     /* 17 */
  --fs-lg: 1.1875rem;     /* 19 */
  --fs-h4: 1.125rem;
  --fs-h3: clamp(1.18rem, 1rem + .5vw, 1.375rem);
  --fs-h2: clamp(1.9rem, 1.25rem + 2.2vw, 2.85rem);
  --fs-h1: clamp(2.45rem, 1.2rem + 4.6vw, 4.6rem);
  --lh: 1.6;
  --lh-tight: 1.06;

  /* brand */
  --brand-cyan: #00b8f8;
  --brand-blue: #0a78f5;
  --brand-grad: linear-gradient(100deg, #19c6ff 0%, #0a84ff 52%, #0a5cf0 100%);
  /* white on the lightest point of this is 4.8:1 */
  --btn-grad: linear-gradient(180deg, #006ceb 0%, #0052c9 100%);
  --btn-grad-hi: linear-gradient(180deg, #0575f5 0%, #0058d4 100%);
  --ink-0: #030509;
  --ink-1: #060a11;
  --ink-2: #0b111b;
  --ink-3: #121b28;

  /* surfaces */
  --bg: #ffffff;
  --bg-soft: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f7;
  --overlay: rgba(6, 10, 17, .56);

  /* lines */
  --border: #e3e8ef;
  --border-strong: #d0d8e3;
  --hover: rgba(10, 30, 70, .045);

  /* text */
  --text: #0a1222;
  --text-body: #2a3447;
  --text-2: #4b5568;
  --text-3: #5f6b7f;

  /* accent */
  --accent: #0068e8;
  --accent-strong: #0052c2;
  --accent-soft: rgba(0, 104, 232, .08);
  --accent-softer: rgba(0, 104, 232, .045);
  --accent-line: rgba(0, 104, 232, .38);
  --on-accent: #ffffff;
  --focus: #0068e8;

  /* meaning */
  --green: #0f7a55;
  --green-soft: rgba(15, 140, 95, .1);
  --amber: #9a5600;
  --amber-soft: rgba(217, 119, 6, .12);
  --red: #c02626;
  --red-soft: rgba(220, 38, 38, .085);
  --star: #f2a900;

  /* depth */
  --shadow-xs: 0 1px 2px rgba(10, 20, 40, .06);
  --shadow-sm: 0 1px 2px rgba(10, 20, 40, .05), 0 3px 10px -4px rgba(10, 30, 70, .08);
  --shadow: 0 1px 2px rgba(10, 20, 40, .04), 0 14px 34px -14px rgba(10, 30, 70, .2);
  --shadow-lg: 0 2px 6px rgba(10, 20, 40, .04), 0 32px 64px -24px rgba(10, 30, 70, .28);
  --ring: 0 0 0 3px rgba(0, 104, 232, .24);

  /* shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 360ms;

  /* layout */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --hdr-h: 72px;
  --z-hdr: 50;
  --z-bar: 45;
  --z-modal: 80;
  --z-toast: 100;
}

/* the dark theme, and every dark band in either theme */
:root[data-scheme="dark"], .dark {
  color-scheme: dark;
  --bg: #070b12;
  --bg-soft: #0a1019;
  --surface: #0d141f;
  --surface-2: #111a27;
  --surface-3: #16202f;
  --overlay: rgba(0, 0, 0, .66);
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);
  --hover: rgba(255, 255, 255, .055);
  --text: #f2f6fc;
  --text-body: #c9d2e0;
  --text-2: #a8b3c5;
  --text-3: #8b97ab;
  --accent: #3d9bff;
  --accent-strong: #6db3ff;
  --accent-soft: rgba(61, 155, 255, .13);
  --accent-softer: rgba(61, 155, 255, .07);
  --accent-line: rgba(61, 155, 255, .42);
  --focus: #5aaeff;
  --green: #3fd09a;
  --green-soft: rgba(63, 208, 154, .12);
  --amber: #f5b14a;
  --amber-soft: rgba(245, 177, 74, .13);
  --red: #ff7676;
  --red-soft: rgba(255, 118, 118, .12);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -4px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -14px rgba(0, 0, 0, .65);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 34px 70px -24px rgba(0, 0, 0, .8);
  --ring: 0 0 0 3px rgba(90, 174, 255, .32);
}