/* ============================================================================
   DESIGN TOKENS — Fletcher Dental Centre
   Every value here was extracted from the live site's stylesheet or measured
   from live computed styles. Nothing is invented. See SITE_AUDIT.md §4.
   ========================================================================== */

:root {
  /* --- Brand (declared in the original :root) ------------------------------ */
  --primary-color: #222533;   /* near-black navy: headings, header, footer     */
  --button-color:  #95d50b;   /* lime green: all primary CTAs                  */
  --white:         #ffffff;

  /* --- Derived neutrals actually rendered on the live site ----------------- */
  --body-text:      #222533;
  --muted-text:     #5d6c7b;
  --footer-divider: #5d5d5d;
  --footer-heading: #e7e7e7;
  --surface:        #ffffff;
  --surface-alt:    #fafafa;
  --border:         #e7e7e7;
  --shadow-sm:      0 2px 5px rgba(0, 0, 0, .2);

  /* Translucent variants used in overlays on the original */
  --primary-90: rgba(34, 37, 51, .9);   /* #222533e6 */
  --primary-60: rgba(34, 37, 51, .6);   /* #22253399 */

  /* --- The `fd-*` homepage promo embed ------------------------------------
     A hand-coded Webflow embed with its own palette and typeface (Arial).
     Kept as a scoped, clearly-labelled subsystem so it never leaks into the
     main design system. See SITE_AUDIT.md §4 "fd-* homepage embed".          */
  --fd-bg:      #eef8fb;
  --fd-border:  #48b8c7;
  --fd-frame:   #9ddce7;
  --fd-heading: #23627c;
  --fd-eyebrow: #0b6f78;
  --fd-link:    #0a4a50;
  --fd-grad:    linear-gradient(145deg, #e4f6fa, #ffffff);

  /* --- Typography ---------------------------------------------------------
     Lato    = every heading and button
     Montserrat = body copy and nav links
     (Open Sans was loaded by the original but referenced by exactly one rule,
      .newsletter-button — kept only there.)                                  */
  --font-heading: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt:     "Open Sans", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Desktop type scale (>=992px). Overridden per breakpoint in base.css. */
  --h1-size: 4.5rem;    --h1-lh: 5.5rem;
  --h2-size: 3.75rem;   --h2-lh: 4.5rem;
  --h3-size: 3rem;      --h3-lh: 3.75rem;
  --h4-size: 2.25rem;   --h4-lh: 2.75rem;
  --h5-size: 1.875rem;  --h5-lh: 2.5rem;
  --h6-size: 1.5rem;    --h6-lh: 2rem;
  --body-size: 1rem;    --body-lh: 1.5rem;

  /* --- Layout -------------------------------------------------------------- */
  --container-max:         1320px;   /* .container         */
  --container-pad:         20px;
  --container-default-max: 1218px;   /* .container-default */
  --container-default-pad: 24px;
  --footer-max:            1792px;   /* .footer            */

  --section-pad: 176px;              /* stepped down per breakpoint */

  /* --- Radii (measured from the live site) --------------------------------- */
  --radius-sm:     .5rem;    /* social icon chips            */
  --radius-btn:    .75rem;   /* all buttons                  */
  --radius-header: .8rem;    /* floating header bar          */
  --radius-card:   1rem;
  --radius-lg:     1.5rem;   /* footer                       */
  --radius-pill:   50px;     /* .header-top-style            */

  /* --- Motion -------------------------------------------------------------- */
  --transition: all .4s;     /* the original uses .4s almost everywhere */
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* Webflow's `outQuart`, the easing on every scroll reveal in the original. */
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);

  --z-header: 999999;        /* yes, really — matching the original */
}

/* Tablet and below: the type scale steps down at Webflow's default breakpoints.
   Values transcribed exactly from the original stylesheet. */
@media screen and (max-width: 991px) {
  :root {
    --h1-size: 2.8rem;  --h1-lh: 4.2rem;
    --h2-size: 3.2rem;  --h2-lh: 4rem;
    --h3-size: 2.5rem;  --h3-lh: 3.2rem;
    --h4-size: 2rem;    --h4-lh: 2.2rem;
    --h5-size: 1.5rem;  --h5-lh: 2rem;
    --h6-size: 1.2rem;  --h6-lh: 1.6rem;
    --section-pad: 118px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --h1-size: 2.8rem;  --h1-lh: 4rem;
    --h2-size: 2.6rem;  --h2-lh: 3.4rem;
    --h3-size: 2.2rem;  --h3-lh: 2.8rem;
    --h4-size: 1.8rem;  --h4-lh: 1.9rem;
    --h5-size: 1.3rem;  --h5-lh: 1.8rem;
    --h6-size: 1rem;    --h6-lh: 1.5rem;
    --section-pad: 100px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --h1-size: 2.5rem;  --h1-lh: 3.4rem;
    --h2-size: 2rem;    --h2-lh: 3rem;
    --h3-size: 1.8rem;  --h3-lh: 2.5rem;
    --h4-size: 1.5rem;  --h4-lh: 1.8rem;
    --h5-size: 1.2rem;  --h5-lh: 1.6rem;
    --container-default-pad: 20px;
    --section-pad: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: none; }
}