:root {
  /* faces */
  --font-display: "Domine", serif;          /* 400 + 500 only */
  --font-body: "Lato", sans-serif;          /* 400 / 500 / 700 */

  /* the single hue (FLAVOR, measured from their pixels 2026-09-24) */
  --teal: rgb(0, 122, 114);
  --teal-deep: rgb(9, 73, 70);
  --teal-mist: rgb(228, 241, 240);

  /* structural material */
  --body-ink: rgb(51, 51, 51);
  --grey-structural: rgb(80, 80, 80);
  --hairline: rgb(204, 204, 204);
  --zebra: rgb(243, 243, 243);

  /* surfaces */
  --sheet: rgba(255, 255, 255, 0.9);        /* floating sheet over the canvas (belladental-int/00) */
  --shadow-sheet: 0 0 26px -5px rgba(0, 0, 0, 0.5);
  --radius-sheet: 2px;
  --contact-core: rgb(16, 99, 93);          /* radial core of the contact band; edge = --teal-deep (same hue, luminance only) */
  --grey-footer: rgb(92, 94, 94);           /* structural grey footer canvas (family register, r2) */
  --grey-footer-legal: rgb(78, 80, 80);     /* legal strip, a shade darker */
  --frost: rgba(255, 255, 255, 0.5);        /* hero card */
  --tile-scrim: rgba(9, 73, 70, 0.78);      /* services caption strip */
  --card-on-dark: rgba(255, 255, 255, 0.07);
  --card-on-dark-b: rgba(255, 255, 255, 0.16);
  --on-dark-soft: rgba(255, 255, 255, 0.78);
  --on-dark-quote: rgba(255, 255, 255, 0.92);
  --on-dark-line: rgba(255, 255, 255, 0.14);

  /* carve-outs (outside the hue budget, standing rulings) */
  --g-star-amber: #fbbc04;                  /* Google widget native */
  --req-red: rgb(255, 194, 191);            /* required-field * glyphs ONLY. Wave A class B:
                                               the glyph only ever sits on the dark contact band;
                                               the old rgb(185,74,72) read 1.40:1 there. Same red
                                               hue, lightened: 4.63:1 on the band core
                                               rgb(16,99,93), 6.68:1 on the edge rgb(9,73,70).
                                               Still aria-hidden; `required` carries the meaning. */

  /* atoms */
  --pill-h: 48px;
  --pill-sm-h: 44px;                        /* small pill (map tile): 44px target floor */
  --pill-border: 1px solid var(--teal);
  --pill-transition: 0.2s ease;
  --tile-duration: 600ms;
  --tile-border-width: 3px;
  --tile-border-margin: 15px;
  --tile-image-opacity: 0.5;
  --shadow-card: rgba(0, 0, 0, 0.145) 5px 5px 10px 3px;
  --radius-tile: 3px;
  --radius-review-card: 7px;
  --focus-ring: 3px solid var(--teal-deep);

  /* fixed component px (recipe-fixed, verified viewport-independent) */
  --hero-pill-w: 281px;
  --hero-card-logo-w: 350px;
  --services-pill-w: 350px;
  --nap-card-w: 352px;
  --form-col-max: 680px;                    /* r2: form column cap (640-680 class) */
  --hours-card-max-w: 320px;
  --hours-row-h: 54px;
  --accent-bar-h: 200px;                    /* the one hard-px axis of the em device */
  --nav-link-box-h: 90px;
  --ribbon-min-h: 46px;
  --mobile-bar-h: 80px;
  --actionbar-h: 56px;
}
/* NOTE: the logo mark's purple rgb(72,71,149) exists ONLY inside the logo raster.
   It is deliberately NOT a token and must never appear as a CSS value (house ban). */