/* ==========================================================================
   TOKENS — colors, type, spacing, radii. Change the look of the site here.
   Two layers: primitives (--yellow-500…) and semantic (--color-accent…).
   Components use the semantic ones.
   ========================================================================== */

:root {
  /* ---- Primitives: Smart Choice brand ---- */
  --yellow-500: #f0b223;   /* brand yellow (bulb) */
  --yellow-400: #f6c64f;
  --yellow-100: #fdf3d6;
  --navy-900: #000f30;     /* darkest brand blue: footer, dark panels */
  --navy-800: #0b1a45;
  --navy-700: #1f2d5c;     /* brand navy: buttons, headings on yellow */
  --blue-500: #3e63dd;     /* logo royal blue: links, small accents */
  --blue-600: #3358d4;
  --red-500: #da2e2e;      /* emergencies only */
  --red-600: #b92222;

  --white: #ffffff;
  --gray-50: #f4f5f8;
  --gray-100: #eceef3;
  --gray-200: #dfe2ea;
  --gray-500: #646b7c;
  --gray-700: #2f3445;

  /* ---- Semantic ---- */
  --color-bg: var(--white);
  --color-bg-soft: var(--gray-50);
  --color-accent: var(--yellow-500);
  --color-dark: var(--navy-900);
  --color-primary: var(--navy-700);
  --color-heading: var(--navy-900);
  --color-text: var(--gray-700);
  --color-text-muted: var(--gray-500);
  --color-link: var(--blue-500);
  --color-line: var(--gray-200);
  --color-emergency: var(--red-500);
  --color-ink: var(--navy-900);            /* small dark text and icons on the page background */
  --color-surface: var(--white);           /* cards, menus and form panels */
  --color-top: var(--yellow-500);          /* colored area at the top of every page */
  --color-top-ink: var(--navy-900);        /* text on that area */
  --color-top-line: rgba(0, 15, 48, 0.25);
  --color-field-line: var(--gray-200);     /* underline of form fields */
  --color-bars: var(--white);              /* bars of the page transition */
  --color-on-primary: var(--white);        /* text on primary buttons */
  --color-primary-hover: var(--navy-900);
  --color-on-dark: var(--white);
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-line-on-dark: rgba(255, 255, 255, 0.16);

  /* ---- Typography ---- */
  --font-body: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);

  --text-xs: 0.8125rem;                         /* 13px: eyebrows, tags */
  --text-s: 0.9375rem;                          /* 15px */
  --text-m: 1.0625rem;                          /* 17px body on mobile */
  --text-l: clamp(1.125rem, 0.9rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --text-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --text-h2: clamp(1.875rem, 1.2rem + 2.6vw, 2.75rem);     /* 30 → 44px */
  --text-h1: clamp(2.25rem, 1.2rem + 4.4vw, 4.25rem);      /* 36 → 68px */
  --text-hero: clamp(2.5rem, 1rem + 6.2vw, 5.125rem);      /* 40 → 82px */
  --text-stat: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);

  --leading-tight: 1.08;
  --leading-heading: 1.18;
  --leading-body: 1.65;
  --weight-body: 500;
  --weight-heading: 500;
  --weight-bold: 700;

  /* ---- Spacing ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8.75rem);     /* 64 → 140px */

  /* ---- Layout ---- */
  --container-max: 1228px;
  --container-pad: 24px;
  --pixel: clamp(36px, 5vw, 64px);     /* size of the decorative squares */
  --header-height: 96px;

  /* ---- Shape ---- */
  --radius-pill: 96px;
  --radius-s: 6px;
  --radius-m: 12px;
}

@media (max-width: 767px) {
  :root {
    --header-height: 72px;
    --container-pad: 20px;
  }
}