/* Fox Run Eye Care: design tokens. Source: _notes/DESIGN_TOKENS.md. All colors go through these variables. */
:root {
  /* Brand */
  --teal: #00617d;          /* primary: buttons, links, accents (WP Primary #00617C) */
  --teal-dark: #00485c;     /* headings, dark text accents */
  --teal-hover: #0a7596;    /* primary button hover background */
  --teal-bright: #0380a3;   /* brighter teal (WP custom "Background Color") */
  --cyan: #14bec8;          /* eyebrows, small accents on light backgrounds */
  --cyan-hover: #3fd0d9;    /* cyan button hover background */
  --cyan-on-dark: #7fd3ea;  /* light accent text on dark backgrounds */
  --cyan-soft: #e6f8f9;

  /* Text */
  --text: #566169;          /* paragraphs (blue-gray, as on the live site) */
  --ink: #1f3a44;           /* strong body text, FAQ questions */
  --text-light: #4f5e64;    /* dates, captions */

  /* Surfaces */
  --white: #ffffff;
  --bg-pale: #f0f7f9;
  --bg-tint: #e3eff2;
  --band-1: #eaf5f7;        /* section band peaks, lightest */
  --band-2: #d3e9ee;
  --band-3: #bfe0e8;        /* never darker than this for a band */
  --line: #d8edf0;          /* borders */
  --navy: #003f51;           /* dark navy, product page hero gradient (omega-3, MacuHealth pages) */
  --dark: #161616;          /* header and top bar (WP Secondary) */
  --gold: #f6b100;          /* review stars only */

  /* Gradients */
  --cta-gradient: linear-gradient(180deg, #ffffff 0%, #eaf5f7 12%, #00617d 55%, #00485c 100%);

  /* Hero circle */
  --hero-circle: rgba(3, 128, 163, 0.80);        /* teal-bright at 80% opacity (desktop) */
  --hero-circle-mobile: rgba(3, 128, 163, 0.90); /* teal-bright at 90% opacity (mobile) */
  --hero-overlay: rgba(0, 0, 0, 0.50);           /* hero bg image dark overlay */
  --hero-overlay-mobile: rgba(0, 0, 0, 0.13);    /* hero mobile — lighter overlay */
  --ai-overlay: rgba(0, 0, 0, 0.30);             /* AI band bg image overlay */

  /* Type */
  --font-display: Georgia, "Times New Roman", serif;
  --font-product: "Archivo Black", sans-serif;    /* MacuHealth product page headings */
  --font-brand: "Montserrat", sans-serif;         /* hero circle text; product page body */
  --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-util: Arial, Helvetica, sans-serif;
  --line-height: 1.65;

  /* Type scale */
  --fs-xs: 0.75rem;       /* 12px — eyebrow labels */
  --fs-sm: 0.875rem;      /* 14px — top bar, copyright */
  --fs-base: 1rem;        /* 16px — menu, dropdown, buttons */
  --fs-body: 0.9375rem;   /* 15px — footer text and links */
  --fs-h4: 1.125rem;      /* 18px — footer group headings, card/box headings */
  --fs-h3: 1.375rem;      /* 22px — page section sub-headings */
  --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem);  /* 28–40px — section headings */
  --fs-page-h1: clamp(1.9rem, 3.6vw, 2.75rem);  /* 30–44px — page H1, one size site-wide (not homepage, not blog) */
  --fs-h1: clamp(2rem, 4.5vw, 3rem);       /* 32–48px — page H1 */
  --lh-tight: 1.3;
  --lh-body: 1.6;
  --ls-eyebrow: 0.12em;

  /* Luxe hero palette (Oct 2026) */
  --teal-night: #003E50;
  --gold-light: #EED7A0;   /* top of the gold button gradient */
  --gold-line: #C9A24B;
  --gold-soft: #D8B66A;
  --mist: #E6F1F3;
  --mist-2: #CFE0E4;
  --mist-3: #B9CED3;
  --teal-ink: #013C4D;     /* dark text on gold buttons */
  --teal-panel: #004A60;   /* hero news panel */
  --gold-glint: #F2DDA8;   /* bright arc on the inner ring */
  --header-bg: #2D2D2D;   /* header main bar, as on the original site */
  --gold-deep: #8C6D2C;   /* border of gold buttons */
  --font-luxe: "Cormorant Garamond", Georgia, serif;

  /* Shape and layout */
  --radius-btn: 30px;
  --radius-card: 16px;
  --radius-img: 18px;
  --content-max: 1140px;
  --content-narrow: 820px;
  --gutter: 24px;
  --band-pad: 64px;
  --band-pad-mobile: 46px;
}