/* =============================================================================
   Superb Car Wash — design tokens.
   -----------------------------------------------------------------------------
   Direction: Deliveroo. Bright teal as the brand surface, near-black ink, clean
   white cards on a barely-grey canvas, generous radii, confident sans headings.
   The LOGO is unchanged — the dark tile with the amber "S" — so amber survives
   as the accent (badges, the Club, highlights) rather than as the UI colour.

   Contrast rules that shape everything below:
     * Bright teal (--teal-400) is a LIGHT colour. It is a SURFACE, and the ink
       on it is near-black — never white text at body sizes.
     * The primary CTA uses --teal-700, which is dark enough to carry white text
       at WCAG AA. That is why the button teal and the brand teal differ.
     * Amber is likewise a surface, never a text colour on white.

   NO DARK MODE. The palette is fixed and light in every condition — an operator
   comparing a paint finish, and a customer checking a price, should see exactly
   the same colours whatever their phone is set to. scripts/test-ui.js fails the
   build if a dark-mode block or another product's palette reappears here.
   ========================================================================== */

:root {
  color-scheme: light only;      /* stop the UA re-colouring form controls */

  /* ---- brand: teal --------------------------------------------------- */
  --teal-050:#e6faf8;
  --teal-100:#c9f4ef;
  --teal-200:#96eae2;
  --teal-300:#4fded1;
  --teal-400:#00ccbc;   /* THE brand colour — a surface, never white text on it */
  --teal-500:#00b8aa;
  --teal-600:#009e92;
  --teal-700:#00786e;   /* CTA ground: carries WHITE text at AA */
  --teal-800:#005c55;
  --teal-900:#00403b;

  /* ---- accent: the logo's amber, used sparingly ---------------------- */
  --amber-050:#fff8ec;
  --amber-100:#ffefd6;
  --amber-200:#ffdfaa;
  --amber-300:#ffcd80;
  --amber-400:#ffbc5b;   /* straight from the logo — badges, Club, highlights */
  --amber-500:#f5a733;
  --amber-600:#d9871a;
  --amber-700:#a86410;
  --amber-800:#6d3f08;
  --amber-900:#7a3d00;

  /* ---- neutrals (true greys, the way Deliveroo sits) ------------------ */
  --ink:#2e3333;         /* near-black: all body text and dark surfaces */
  --ink-deep:#1c2020;
  --ink-2:#4d5555;
  --ink-3:#3a4040;
  --muted:#7d8686;
  --line:#e8ebeb;
  --line-strong:#d4d9d9;
  --line-warm:#eef1f1;
  --sand:#b9c2c2;        /* muted rules on dark surfaces */
  --surface:#ffffff;
  --surface-2:#f6f8f8;
  --canvas:#ffffff;

  /* ---- status --------------------------------------------------------- */
  --ok:#1c7c4a;      --ok-soft:#e6f5ec;
  --warn:#8a5a00;    --warn-soft:#fdf0d8;
  --danger:#c0362a;  --danger-soft:#fbeae7;
  --info:#00786e;    --info-soft:#e6faf8;

  /* ---- type ----------------------------------------------------------- */
  /* Alfa Slab One is the LOGO voice — the wordmark and the "S" tile only. It
     ships ONE weight (400); never ask for bold, the browser fakes it badly. */
  --font-display:'Alfa Slab One', Rockwell, 'Roboto Slab', Georgia, serif;
  /* Headings and UI are the grotesque, set heavy and tight — that weight
     contrast is what makes a delivery app feel confident rather than generic. */
  --font-heading:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem;
  --fs-lg:1.0625rem; --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:2rem;

  /* Bigger, softer radii — the delivery-app tell. */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(46,51,51,.06), 0 1px 3px rgba(46,51,51,.04);
  --shadow:0 4px 14px -2px rgba(46,51,51,.10), 0 2px 6px -2px rgba(46,51,51,.05);
  --shadow-lg:0 18px 44px -18px rgba(46,51,51,.28);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;

  --maxw:560px;
  --maxw-wide:1100px;
}

/* A dark palette is deliberately NOT implemented. Do not add a colour-scheme
   media query or a theme-attribute override here: the brand is fixed and light
   in every condition, and test-ui.js fails the build if one reappears. */