/* ==========================================================================
   Cars & Culture — Design Tokens
   Single source of truth for colour, type, space and motion.
   Breakpoints (mobile first, min-width) — CSS custom properties cannot be
   used inside media queries, so they are documented here and used literally:
     Tablet         48rem  (768px)
     Laptop         64rem  (1024px)
     Desktop        80rem  (1280px)
     Large Desktop  100rem (1600px)
   ========================================================================== */

:root {
  /* ---- Colour ----------------------------------------------------------- */
  --color-background: #f3f0ea;   /* warm paper */
  --color-surface: #e9e5dd;      /* quiet panels */
  --color-text: #151412;         /* ink */
  --color-muted: #5f5a53;        /* meta, captions — AA on background + surface */
  --color-border: #d6d0c6;       /* hairlines */
  --color-accent: #9e2a1e;       /* aged racing red — used sparingly */
  --color-accent-hover: #7e2017;

  --color-inverse-bg: #121110;
  --color-inverse-text: #ede9e2;
  --color-inverse-muted: #a39d94;
  --color-inverse-border: #34312d;

  --color-scrim: rgb(18 17 16 / 0.55);

  /* ---- Typography ------------------------------------------------------- */
  /* Matched to the logo: high-contrast didone + geometric sans ("MAGAZINE") */
  --font-display: "Gloock", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;           /* headlines — roman only */
  --font-serif: "Libre Bodoni", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif;       /* leads, quotes, all italics */
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* text, labels, UI */

  --fs-display: clamp(3rem, 1rem + 8vw, 9rem);
  --fs-h1: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 1;
  --lh-snug: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.75;

  --tracking-label: 0.18em;
  --tracking-display: -0.02em;

  /* ---- Space (8px base, large steps are fluid) -------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: clamp(2rem, 1.5rem + 2vw, 3rem);
  --space-xl: clamp(3rem, 2rem + 4vw, 5rem);
  --space-2xl: clamp(4rem, 2.5rem + 7vw, 9rem);
  --space-3xl: clamp(5rem, 3rem + 10vw, 12rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container-width: 90rem;      /* 1440px */
  --container-wide: 105rem;      /* 1680px */
  --article-width: 40rem;        /* ~66 characters per line */
  --gutter: clamp(1rem, 4vw, 3rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);

  --header-bar-h: 3.75rem;
  --masthead-h: clamp(6rem, 3rem + 7vw, 11rem);

  /* ---- Image ratios ----------------------------------------------------- */
  --ratio-hero: 16 / 9;
  --ratio-editorial: 4 / 5;
  --ratio-landscape: 3 / 2;
  --ratio-portrait: 2 / 3;

  /* ---- Lines ------------------------------------------------------------ */
  --hairline: 1px solid var(--color-border);
  --rule: 1px solid var(--color-text);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  /* ---- Layers ----------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
}