/* Design tokens — read from the Figma file (WObhsdlB4yrVErmzRiWBc7).
   The file defines no variables, so the scale is established here. */

:root {
  /* Brand */
  --orange: #f37321;
  --orange-hover: #d95f14;
  --ink: #1e2a38;
  --black: #000000;
  --white: #ffffff;
  --grey-50: #f6f7f8;
  --grey-100: #e3e4e6;
  --grey-400: #9aa1a9;

  --text: var(--black);
  --text-muted: #4a545f;
  --surface: var(--white);
  --surface-alt: var(--grey-50);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;

  /* Type scale — desktop values are the Figma sizes, floors chosen for 320px */
  --fs-h1: clamp(2rem, 1.05rem + 3.4vw, 4rem);        /* 64px @1920 */
  --fs-h2: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);      /* 48px */
  --fs-h3: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);     /* 28px */
  --fs-lead: clamp(1rem, 0.94rem + 0.24vw, 1.25rem);  /* 20px */
  --fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.125rem);
  --fs-nav: 1.125rem;                                  /* 18px */
  --fs-small: 0.875rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* Grid — normalised to the product-gallery band, the one internally
     consistent module in the mockup. */
  --content-max: 1728px;
  --gutter: 96px;
  --gap: 60px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 128px;

  --radius-pill: 48px;
  --radius-sm: 4px;

  --tap-min: 44px;   /* WCAG 2.5.8 AA floor, with margin */
}

@media (max-width: 1439px) { :root { --gutter: 64px; --gap: 40px; } }
@media (max-width: 1023px) { :root { --gutter: 40px; --gap: 32px; } }
@media (max-width: 767px)  { :root { --gutter: 24px; --gap: 24px; } }
@media (max-width: 479px)  { :root { --gutter: 20px; --gap: 20px; } }