/* Road Trip Cruisers - design tokens (PITCH-PLAN.md, Brand direction + Layout).
 * The resolver's tokens.css (site root, from brand.json) is linked first; where it holds a colour this
 * file reads it rather than retyping it. Ochre, laterite, cream and ink are the brief's anchors
 * (brand.json palette), which the resolver keeps as anchors rather than tokens. */
:root {
  /* Palette */
  --ochre: #F4B41A;                       /* brand.json palette.accent: the next drive, the season board's one bright row */
  --laterite: #B5482A;                    /* brand.json palette.laterite: the join room and the footer */
  --basalt: var(--colour-navy, #1f1b17);  /* header and the season board's ground */
  --cream: #FBF3E2;                       /* brand.json palette.cream: the neutral return, long reading */
  --crimson: var(--colour-primary, #c21d4f);          /* the one action colour */
  --crimson-hover: var(--colour-primary-hover, #af0042);
  --ink: #231F1A;                         /* brand.json palette.ink: text on cream */
  --on-ochre: var(--colour-on-accent, #15140f);       /* ink on the ochre fill */
  --ochre-text: var(--colour-accent, #b38200);        /* ochre as text, on light grounds only */
  --on-crimson: var(--colour-on-primary, #ffffff);

  --basalt-2: color-mix(in oklab, var(--basalt) 91%, var(--cream));
  --basalt-3: color-mix(in oklab, var(--basalt) 84%, var(--cream));
  --laterite-deep: color-mix(in oklab, var(--laterite) 72%, var(--basalt));
  --on-basalt: var(--cream);
  --on-basalt-muted: color-mix(in oklab, var(--cream) 70%, var(--basalt));
  --on-cream-muted: color-mix(in oklab, var(--ink) 74%, var(--cream));
  --on-laterite: #FFFFFF;
  --cream-2: color-mix(in oklab, var(--cream) 90%, var(--ochre));

  /* Type */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Mukta", "Segoe UI", sans-serif;
  --body-size: 1.125rem;   /* 18px */
  --body-leading: 1.6;

  /* Fluid sizes: they grow from 390 to 1680 and stop (Type cap: 1680px) */
  --step-0: 1.125rem;
  --step-1: clamp(1.25rem, 1.138rem + 0.46vw, 1.5rem);
  --step-2: clamp(1.375rem, 1.185rem + 0.78vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.39rem + 1.48vw, 2.75rem);
  --step-4: clamp(2.125rem, 1.538rem + 2.41vw, 3.75rem);
  --step-hero: clamp(3.5rem, 2.386rem + 4.571vw, 7rem); /* the 85% span is a measured brief requirement (Spare-register cap) */

  /* Width model */
  --content: 1280px;
  --measure: 66ch;
  --photo-cap: 1280px;     /* img-026, img-073, img-014 paint no wider (image-whitelist maxPaintCss) */
  --gutter: clamp(16px, 3.2vw, 40px);
  --section: clamp(64px, 5vw, 80px);
  --header-h: 72px;        /* phone; 96px from 760px (brand.json logoMetrics.headerHeight) */
  --logo-h: 44px;          /* logoMetrics.displayHeightMobile */
}
@media (min-width: 760px) {
  :root { --header-h: 96px; --logo-h: 64px; } /* logoMetrics.headerHeight / displayHeight */
}