/* ==========================================================================
   Primary ENT — Design Tokens
   Source of truth for the theme. Every page must consume these variables
   instead of hard-coding colors, spacing, or type sizes.
   ========================================================================== */

:root {
  /* ---- Color: Brand ---- */
  --color-utility-blue: #009be2;   /* top utility bar */
  --color-navy: #1a2e5a;           /* headings, footer CTA panel */
  --color-sky: #5cc4ff;            /* secondary accent, links-on-dark */
  --color-orange: #ffa300;         /* primary CTA */
  --color-orange-alt: #f37021;     /* urgent-care accent */
  --color-star: #f59e0b;

  /* ---- Color: Neutral ---- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-border: #dddddd;
  --color-bg-soft: #f5f5f5;
  --color-bg-tint: rgba(92, 196, 255, 0.1);
  --color-footer-bg: #eff9ff;

  /* ---- Color: Text-on-white opacity scale ---- */
  --text-90: rgba(0, 0, 0, 0.9);
  --text-80: rgba(0, 0, 0, 0.8);
  --text-70: rgba(0, 0, 0, 0.7);
  --text-60: rgba(0, 0, 0, 0.6);

  /* ---- Color: Text-on-navy opacity scale ---- */
  --text-on-navy-80: rgba(255, 255, 255, 0.8);

  /* ---- Typography ---- */
  --font-primary: "Rubik", "Onest", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Rubik", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-hero: 3.4375rem;      /* 55px */
  --fs-h2: 2.875rem;         /* 46px */
  --fs-h3: 1.375rem;         /* 22px */
  --fs-lead: 1.125rem;       /* 18px */
  --fs-body: 1rem;           /* 16px */
  --fs-small: 0.875rem;      /* 14px */

  /* ---- Radius ---- */
  --radius-pill: 100px;
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 12px;

  /* ---- Spacing (section rhythm) ---- */
  --section-py: 80px;
  --section-py-sm: 48px;
  /* Single source of truth for every container's side padding — header,
     nav, hero, and every page section all read this same value so their
     left/right edges line up with the logo instead of drifting apart. */
  --container-px: 60px;
  --container-px-sm: 24px;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --shadow-card: 0 20px 40px rgba(26, 46, 90, 0.08);
  --transition-base: 0.2s ease;
}