/* ==========================================================================
   LUMEN TRADES TEMPLATE v1 — TOKENS
   THIS IS ONE OF ONLY TWO FILES YOU EDIT PER CLIENT.
   The other is index.html. Never edit styles.css or app.js.

   Colour is defined in HSL, never hex, so you can reskin a whole site by
   changing three hue numbers. Sample the client's logo, convert to HSL,
   paste the three numbers, done.
   ========================================================================== */

:root {
  /* ---------- 1. BRAND. SWAP THESE PER CLIENT. ---------- */

  /* Sampled from Autopia's own logo and marketing artwork on their Instagram
     (@autopiaautorepair). Navy #283878 is 51% of the logo artwork, yellow
     #f8d028 is 14%. The shop on Steinway Street is painted the same blue, so
     this is the real identity rather than a guess. */

  /* The dark colour. Headers, footers, section bands, body text. */
  --brand-ink-h: 227;
  --brand-ink-s: 45%;

  /* The accent. Their brand yellow. Buttons, bands, rules, borders.
     WARNING: yellow cannot reach 4.5:1 on white at any usable lightness, so
     it is a FILL colour here. Small text and focus indicators on light
     backgrounds are switched to ink in client.css. Never set body-size text
     on paper in --accent. */
  --brand-accent-h: 48;
  --brand-accent-s: 94%;

  /* The paper. Page background. Keep saturation low, under 25%.
     Cooled to sit under the navy instead of the template's warm default. */
  --brand-paper-h: 227;
  --brand-paper-s: 14%;

  /* ---------- 2. COLOUR RAMPS. Built from the hues above. ---------- */
  --ink-900: hsl(var(--brand-ink-h) var(--brand-ink-s) 11%);
  --ink-800: hsl(var(--brand-ink-h) var(--brand-ink-s) 16%);
  --ink-700: hsl(var(--brand-ink-h) calc(var(--brand-ink-s) - 8%) 28%);
  --ink-500: hsl(var(--brand-ink-h) calc(var(--brand-ink-s) - 14%) 44%);
  --ink-300: hsl(var(--brand-ink-h) calc(var(--brand-ink-s) - 20%) 72%);
  --ink-200: hsl(var(--brand-ink-h) calc(var(--brand-ink-s) - 22%) 86%);

  --accent-700: hsl(var(--brand-accent-h) var(--brand-accent-s) 34%);
  --accent-600: hsl(var(--brand-accent-h) var(--brand-accent-s) 42%);
  --accent-500: hsl(var(--brand-accent-h) var(--brand-accent-s) 56%);  /* #f8d028, their exact yellow */
  --accent-100: hsl(var(--brand-accent-h) calc(var(--brand-accent-s) - 30%) 92%);

  --paper-100: hsl(var(--brand-paper-h) var(--brand-paper-s) 98%);
  --paper-200: hsl(var(--brand-paper-h) calc(var(--brand-paper-s) - 6%) 95%);
  --white: #fff;

  /* Semantic layer. Components reference ONLY these, never the ramps. */
  --bg: var(--paper-100);
  --bg-sunken: var(--paper-200);
  --bg-elev: var(--white);
  --bg-invert: var(--ink-900);
  --bg-band: var(--ink-800);

  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-invert: var(--paper-100);
  --text-invert-muted: var(--ink-300);

  --accent: var(--accent-500);        /* bright brand yellow, for FILLS */
  --accent-hover: var(--accent-600);
  --accent-on-dark: var(--accent-500);
  --accent-fg: var(--ink-900);   /* navy on yellow. White on yellow is unreadable. */

  --line: var(--ink-200);
  --line-strong: var(--ink-300);
  --ring: var(--accent-500);

  /* ---------- 3. TYPE ---------- */
  /* Display is condensed caps: the vernacular of trades signage and truck
     lettering. Body is a neutral grotesque so long copy stays readable. */
  --font-display: "Barlow Condensed", "Oswald", Impact, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* SIX sizes. Never add a seventh. */
  --step-display: clamp(2.75rem, 1.4rem + 6.2vw, 5.5rem);
  --step-h1:      clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
  --step-h2:      clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
  --step-h3:      clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
  --step-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-small:   0.8125rem;

  --lh-tight: 1.04;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --tracking-display: -0.015em;
  --tracking-eyebrow: 0.2em;

  /* ---------- 4. SPACE ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-sm: clamp(2.5rem, 5vw, 3.5rem);
  --section-md: clamp(3.5rem, 7vw, 5.5rem);
  --section-lg: clamp(4.5rem, 9vw, 7rem);

  /* ---------- 5. LAYOUT ---------- */
  --max: 1200px;
  --max-narrow: 760px;
  --gutter: 1.5rem;
  --page-margin: clamp(1.125rem, 4vw, 2.5rem);
  --nav-h: 4.25rem;

  /* ---------- 6. SURFACE ---------- */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px hsl(var(--brand-ink-h) 20% 10% / 0.07);
  --shadow-2: 0 10px 30px -12px hsl(var(--brand-ink-h) 25% 10% / 0.22);
  --shadow-3: 0 24px 56px -24px hsl(var(--brand-ink-h) 25% 10% / 0.32);

  /* ---------- 7. MOTION ---------- */
  --dur: 240ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}