/* tokens.css — the ONLY file containing raw colour values.
 *
 * Palette source (see BUSINESS-FACTS.md → Brand):
 *   navy        sampled from the supplied logo artwork (#071E40)
 *   royal blue  the crew's branded golf shirts
 *   red         the name panel and number on the vehicle decals
 * Nothing here is invented; it is what is physically on their vehicles.
 */

:root {
  /* --- brand ------------------------------------------------------- */
  --navy-900: #050f22;          /* deepest ground, footer */
  --navy-800: #071e40;          /* logo navy */
  --navy-700: #0d2b56;
  --navy-600: #14396f;

  --blue-600: #1741b8;          /* crew shirt blue, darkened to pass on white */
  --blue-500: #1e4fd8;
  --blue-100: #e6ecfd;
  --blue-050: #f2f6ff;
  --blue-025: #e7eeff;          /* light wash of the crew-shirt blue */

  --red-700: #a8151d;           /* decal red, darkened for text use */
  --red-600: #c81f27;
  --red-100: #fdeaeb;
  --red-025: #fce9e6;           /* light wash of the vehicle-decal red */

  --green-700: #0f7a68;         /* WhatsApp action, darkened to 5.2:1 on white */
  --green-800: #0b6355;         /* hover */
  --green-600: #128c7e;         /* WhatsApp brand green: 4.1:1, too low for text */

  /* --- neutrals ---------------------------------------------------- */
  --white: #ffffff;
  --grey-050: #f7f8fa;
  --grey-100: #eef0f4;
  --grey-200: #dde1e9;
  --grey-300: #c3c9d6;
  --grey-500: #56617a;         /* muted text: kept above 4.5:1 on the tinted blocks */
  --grey-700: #3a445c;
  --grey-900: #111a2e;

  /* --- semantic ---------------------------------------------------- */
  --bg: var(--white);
  --bg-alt: var(--blue-025);    /* light blue block */
  --bg-warm: var(--red-025);    /* light red block */
  --bg-blue: #dbe5ff;           /* stronger blue block */
  --bg-ink: var(--navy-800);
  --bg-ink-deep: var(--navy-900);

  --text: var(--grey-900);
  --text-muted: var(--grey-500);
  --text-on-ink: #ffffff;
  --text-on-ink-muted: #dbe4f5;

  --border: var(--grey-200);
  --border-ink: #1d3a68;

  --action: var(--blue-600);
  --action-hover: var(--navy-700);
  --action-text: #ffffff;

  --accent: var(--red-600);
  --accent-text: var(--red-700);

  --whatsapp: var(--green-700);
  --whatsapp-hover: var(--green-800);

  --focus: #ffb703;

  /* --- type -------------------------------------------------------- */
  --font-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4: clamp(2.1rem, 1.7rem + 2vw, 3.4rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  /* --- space ------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --gutter: clamp(1rem, 4vw, 2rem);
  --measure: 68ch;
  --page-max: 1180px;

  /* --- shape ------------------------------------------------------- */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(5, 15, 34, 0.08);
  --shadow-m: 0 6px 20px rgba(5, 15, 34, 0.1);
  --shadow-l: 0 18px 48px rgba(5, 15, 34, 0.16);
  --shadow-up: 0 -4px 16px rgba(5, 15, 34, 0.08);

  /* Scrims over photography, so text keeps its contrast. The horizontal pass
     keeps the left-hand copy off the lettering painted on the vehicle. */
  --scrim-hero:
    linear-gradient(
      90deg,
      rgba(5, 15, 34, 0.86) 0%,
      rgba(5, 15, 34, 0.66) 46%,
      rgba(5, 15, 34, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 15, 34, 0.38) 0%,
      rgba(5, 15, 34, 0.26) 45%,
      rgba(5, 15, 34, 0.52) 100%
    );
  --scrim-lightbox: rgba(5, 15, 34, 0.92);

  --ring: 3px solid var(--focus);
}