/* ============================================================
   Clearview Optical — Optometry Clinic template
   TOKENS: the customization layer.

   Everything brand-critical lives here. Change these values to
   rebrand the template; you should not need to touch index.html
   except for copy and image swaps.
   ============================================================ */
:root {
  /* ---------- Ground & surface ---------- */
  --ground: #F8FAFC;        /* page background — cool clinical */
  --card: #FFFFFE;          /* card / panel surface */
  --band: #EEF3F7;          /* alternating tinted section band */
  --ink-bg: #0F1E2B;        /* dark register sections (stats, final CTA) */
  --ink-bg-2: #16293A;      /* dark register card surface */

  /* ---------- Text ---------- */
  --ink: #0F1E2B;           /* headings + body on light grounds */
  --slate: #4A5A69;         /* muted body/secondary on light (AA on --ground) */
  --slate-quiet: #5A6B7A;   /* large-text-only muted tone */
  --on-dark: #E8EEF3;       /* body text on the dark register */
  --on-dark-muted: #A9B8C4; /* muted text on dark (AA-safe, >= #a3a3a3) */

  /* ---------- Accent ---------- */
  --accent: #047857;        /* emerald — CTAs, key numerals, hover, focus */
  --accent-deep: #036049;   /* accent hover / pressed */
  --accent-tint: #E3F2EC;   /* accent wash for chips and active tabs */
  --accent-on-dark: #34D399;/* accent legible against --ink-bg (large/UI only) */

  /* ---------- Rules & shape ---------- */
  --rule: rgba(15, 30, 43, .12);   /* hairline dividers on light */
  --rule-dark: rgba(232, 238, 243, .16); /* hairline dividers on dark */
  --radius: 12px;           /* the single structural radius */
  --radius-chip: 999px;     /* pills and chips only */

  /* ---------- Elevation ---------- */
  --shadow-card: 0 1px 2px rgba(15, 30, 43, .04), 0 12px 32px rgba(15, 30, 43, .06);
  --shadow-lift: 0 2px 4px rgba(15, 30, 43, .06), 0 24px 56px rgba(15, 30, 43, .10);

  /* ---------- Typography ----------
     Loaded via the Google Fonts <link> in index.html <head>.
     To change a face: update that <link>, then update the stack below. */
  --font-sans: "Instrument Sans", system-ui, sans-serif; /* display + body */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* labels + measures */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* defensive: prevent any stray horizontal scroll (clip, not hidden — keeps position:sticky working) */
html { overflow-x: clip; }