/* ============================================================
   BrightSmile — Dental 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 {
  /* ---------- Brand palette ---------- */
  --teal: #0FA3A3;        /* primary accent — buttons, links, icons, focus ring */
  --teal-dark: #0A7070;   /* accent hover / link text / solid button fill (AA on light backgrounds AND under white text) */
  --teal-deep: #17494D;   /* deep brand shade — dark sections, headings */
  --mint: #E6F7F5;        /* tinted surface — eyebrow chips, soft cards */
  --mint-soft: #F2FBFA;   /* lightest tint — alternating section backgrounds */
  --warm: #FDFDFB;        /* page background */
  --sun: #FFC94D;         /* secondary accent — stars, highlights, badges */
  --sun-soft: #FFE9B8;    /* secondary accent tint */

  /* ---------- Text ---------- */
  --ink: #17494D;         /* body + heading text */
  --ink-soft: #3E6B6F;    /* muted/secondary text */

  /* ---------- Shape ---------- */
  --radius: 24px;         /* default card/button radius */
  --radius-sm: 20px;      /* small elements */
  --radius-lg: 28px;      /* large panels */

  /* ---------- Elevation ---------- */
  --shadow-soft: 0 10px 40px rgba(15, 163, 163, .12);
  --shadow-lift: 0 18px 50px rgba(23, 73, 77, .16);

  /* ---------- Typography ----------
     Loaded via the Google Fonts <link> in index.html <head>.
     To change a face: update that <link>, then update the stack below. */
  --font-head: "Quicksand", sans-serif;   /* headings + display */
  --font-body: "Nunito Sans", sans-serif; /* body copy + UI */
}