/* =========================================================================
   THEME  --  Rubin Orthodontics  --  "Bright & Confident" (Direction A)

   THIS IS THE ONE FILE YOU EDIT TO RE-SKIN THE WHOLE SITE.
   Every color, font, radius, shadow and spacing value lives here as a
   custom property. site.css and every page only reference these tokens,
   so changing a value here re-themes all 23 pages at once.

   Quick recipe:
   - New brand color?  change --accent (+ --accent-soft, --fg if ink shifts).
   - New action color? change --cta (keep contrast AA on white text; the
     current coral #bd3622 passes 4.5:1). --cta is the ONLY action color.
   - New fonts?        change --font-display / --font-body and swap the
     <link> the generator injects (FONT_LINK in build_site.py).
   ========================================================================= */

:root {
  /* ---- Surfaces & ink ------------------------------------------------- */
  --bg:            #f6fbf9;   /* page field (warm cream) */
  --surface:       #ffffff;   /* cards */
  --surface-warm:  #c9e8e1;   /* brand mint (Pantone 573c) */   /* tinted panels / soft sections */
  --fg:            #0e4d4a;   /* headings (deep teal) */
  --fg-2:          #565656;   /* brand gray (Pantone 425c) */   /* body text */
  --muted:         #6d6d6d;   /* secondary text */

  /* ---- Brand accent (teal) -- seasoning, never the action color ------- */
  --meta:          #15706a;   /* eyebrows / small labels */
  --accent:        #15706a;
  --accent-soft:   #5fc4b2;   /* official brand teal (Pantone 563c) */

  /* ---- Lines --------------------------------------------------------- */
  --border:        #cfe5df;
  --border-soft:   #e2f1ec;

  /* ---- Action color (coral) -- the ONLY call-to-action color ---------- */
  --cta:           #5fc4b2;   /* brand teal (Pantone 563c) */
  --cta-hover:     #46b09c;
  --cta-on:        #093230;   /* deep ink for AA contrast on brand teal */
  --star:          #e8a93b;

  /* ---- Dark panels (footer / consult band) --------------------------- */
  --ink-deep:      #093230;
  --ink-grad-from: #0e4d4a;
  --ink-grad-to:   #0a3b39;
  --on-dark:       #ffffff;
  --on-dark-soft:  rgba(231, 242, 239, 0.82);

  /* ---- Type ---------------------------------------------------------- */
  --font-display:  "futura-pt", "Jost", system-ui, sans-serif;  /* brand: Futura PT (Adobe); Jost = free fallback */
  --font-body:     "futura-pt", "Jost", system-ui, -apple-system, sans-serif;
  --font-script:   Georgia, "Times New Roman", serif;  /* wordmark */
  --tracking-display: -0.02em;
  --tracking-caps:    0.12em;   /* eyebrows / overlines (>=0.06em floor) */
  --base-font-size:   17px;
  --base-line:        1.62;

  /* ---- Shape --------------------------------------------------------- */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   26px;
  --radius-pill: 9999px;

  /* ---- Elevation ----------------------------------------------------- */
  --elev:      0 22px 54px rgba(14, 77, 74, 0.13);
  --elev-cta:  0 10px 24px rgba(95, 196, 178, 0.38);

  /* ---- Layout -------------------------------------------------------- */
  --maxw:      1180px;
  --gutter:    40px;
  --sec-pad:   84px;   /* vertical rhythm for sections */

  /* ---- Drop-in widget bridge ----------------------------------------- */
  /* Conventional brand-var names that self-contained widgets inherit (e.g.
     the Google reviews widget). Mapping them here makes any such widget
     render in THIS theme automatically, with no edits to the widget. */
  --color-white:  var(--surface);
  --color-light:  var(--surface-warm);
  --color-border: var(--border);
  --color-muted:  var(--muted);
  --color-dark:   var(--fg);
  --color-navy:   var(--accent);   /* widget accent (heading + owner badge) */
  --radius:       var(--radius-md);
}

@media (max-width: 640px) {
  :root { --gutter: 18px; --sec-pad: 56px; }
}