/* Danbe Dental - design tokens (r4 fix pass).
   Single source of truth. Every value in site.css references a token here.
   Values are fixed by v2-specs/homepage-spec.md, which derives them from the
   REGENERATED measured recipes in taste-lab/patterns/ (Mechanism sections).

   r4 note: values the recipes express as a RATIO of the viewport are not tokens.
   They live in site.css as the percentage the recipe authors (hero padding-bottom
   5%, hero gap 2%, wells 80%/90%, footer columns 25%), because freezing them as
   px is exactly the mechanism-vs-value transplant the audit found. */

:root {
  /* ---- Colour: 2 hues (ink-blue family + brand azure) + greys + white ---- */
  --ink:            #183454;
  --ink-deep:       #101f33;
  --azure:          #2897ee;   /* brand, sampled from the logo tooth. Small doses only. */
  --azure-deep:     #1c72b8;   /* text-safe derivative, 5.06:1 on white */
  --azure-tint:     #d7ecfc;   /* the one pill fill */
  --azure-on-dark:  #a8d8fb;
  --body-ink:       #15202b;
  --muted-ink:      #3f4b5b;
  --grey-footer:    #6e6a65;
  --grey-zebra:     #f3f3f3;
  --footer-link:    #efefef;   /* mvendo/07 link off-white */
  --grey-fine:      #666666;
  --white:          #ffffff;
  /* Form-convention utility colour. Lives outside the 2-hue budget by the same
     standing ruling as the Google amber: convention-bound, tiny footprint, used
     ONLY for required-field markers (homepage-spec.md section 0, C4). */
  --req-red:        #b94a48;
  /* Third-party-widget native colour: Google's review-star amber. Lives outside
     the 2-hue budget, exactly like the multicolour G mark; used ONLY inside
     Google review cards/summary (owner-session ruling 2026-09-23). */
  --g-star-amber:   #fbbc04;

  /* ---- Surfaces ---- */
  --frost-header:   rgba(255, 255, 255, 0.85);   /* FLAVOR; recipe band 0.71-0.894 */
  --frost-card:     rgba(255, 255, 255, 0.55);   /* hero ghost card; recipe 0.48 */
  /* The canvas is TWO layers (hanoverendo/02 Mechanism): a page overlay plus each
     band's own white. Effective white = 1 - (1-0.4)(1-0.76) = 0.856, so the photo
     reads through at ~14%. */
  --wash-page:      rgba(255, 255, 255, 0.40);
  --wash-band:      rgba(255, 255, 255, 0.76);
  --plate-fill:     rgba(255, 255, 255, 0.89);   /* humphries/02 plate */
  --panel-fill:     rgba(255, 255, 255, 0.89);   /* hanoverendo/05 contact panels */
  --hairline:       rgba(24, 52, 84, 0.10);
  --field-border:   rgba(24, 52, 84, 0.28);
  --on-dark-soft:   rgba(255, 255, 255, 0.72);
  --on-dark-quote:  rgba(255, 255, 255, 0.92);
  --on-dark-line:   rgba(255, 255, 255, 0.14);
  --card-on-dark:   rgba(255, 255, 255, 0.055);
  --card-on-dark-b: rgba(255, 255, 255, 0.16);

  /* ---- Type ---- */
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --size-h1: 38px;          --lh-h1: 45.6px;        /* hanoverendo/01 (fixed px) */
  --size-h2: 48.83px;       --lh-h2: 58.6px;        /* hanoverendo/02, /03 (fixed px) */
  --size-h2-contact: 30px;  --lh-h2-contact: 38px;  /* hanoverendo/05 (fixed px) */
  --size-slab-title: 32px;  --lh-slab-title: 40px;  /* humphries/02 */
  --size-practice: 28px;    --lh-practice: 36px;    /* hanoverendo/05 */
  --size-doc-name: 26px;    --lh-doc-name: 33px;
  --size-caption: 26px;     --lh-caption: 33px;     /* hanoverendo/03 rest caption */
  --size-caption-hover: 20px;                        /* hanoverendo/03 hover caption */
  --size-lede: 20px;        --lh-lede: 28px;        /* hanoverendo body */
  --size-body: 18px;        --lh-body: 25.2px;      /* humphries/02 prose */
  --size-bio: 16px;         --lh-bio: 24px;
  --size-micro: 20px;                                /* hanoverendo/05 micro-heads */
  --size-nav: 17.5px;       --lh-nav: 17.5px;
  --size-dropdown: 16px;
  --size-pill: 17px;
  --size-pill-small: 15px;
  --size-label: 15px;
  --size-input: 14px;
  --size-legal-line: 13px;
  --size-fine: 14px;
  --size-review-name: 17px;
  --size-review-quote: 17px; --lh-review-quote: 27px;
  --size-review-meta: 15px;
  --size-footer-head: 28px; --lh-footer-head: 39.2px;
  --size-footer-name: 22px;
  --size-footer-body: 16px;
  --size-footer-link: 14px;
  --size-hours: 15.75px;
  --size-legal: 14px;

  --ls-nav: 0.24px;
  --ls-upper: 0.5px;

  /* ---- Geometry ---- */
  /* Wells are percentages of the viewport in the recipes; see the note at the top.
     These carry the RATIO, not the landed px. */
  --well-welcome: 80%;        /* hanoverendo/02: 144px gutters at 1440 = 10%/side */
  --well-wide: 90%;           /* hanoverendo/03, /05: 72px gutters at 1440 = 5%/side */
  --band-frame: 30px;         /* humphries/02 + mvendo/07 section-container padding */
  --plate-w: 1300px;          /* humphries/02: plate = min(1300, vw - 60) */
  --hero-well: 1120px;        /* hanoverendo/01 --bde-section-width */
  --split-gap: 20px;          /* hanoverendo/02 Mechanism (NOT the 164px in the prose) */
  --contact-gap: 30px;        /* hanoverendo/05 Mechanism */
  --contact-pad: 30px;        /* hanoverendo/05 column padding */
  --card-gap: 20px;           /* hanoverendo/03 grid gap */
  --footer-gap: 20px;         /* mvendo/07 column gap */
  --docs-gap: 55px;
  --doc-w: 350px;             /* humphries/02 portrait cap */
  --hours-w: 320px;           /* mvendo/07 hours card cap; fills its column below that */
  --map-w: 450px;             /* hanoverendo/05: authored px, genuinely fixed */
  --map-h: 400px;
  --gutter-phone: 20px;
  --well-phone: 350px;
  --h1-measure: 808px;
  --hero-card-w: 350px;       /* hanoverendo/01: the card IS the logo box at 350px */
  --hero-card-w-phone: 240px; /* hanoverendo-mobile/02 */
  --logo-w: 205px;            /* hanoverendo/00: fixed px width */
  --logo-w-compact: 175px;
  --logo-h-mobile: 44px;

  --radius-pill: 9999px;
  --radius-panel: 8px;        /* humphries-interactive/01 dropdown */
  --radius-slab: 7.2px;       /* humphries/02 */
  --radius-card: 7px;
  --radius-field: 4px;        /* hanoverendo/05 */

  --shadow-plate: rgba(24, 52, 84, 0.145) 5px 5px 10px 3px;
  --shadow-slab: rgba(24, 52, 84, 0.13) 0 0 40px;
  --shadow-panel: rgba(50, 50, 93, 0.25) 0 50px 100px -20px,
                  rgba(0, 0, 0, 0.3) 0 30px 60px -30px;

  --band-pad: 84px;
  --band-pad-phone: 52px;

  --header-h: 145px;          /* hanoverendo/00: 70px pill row + 75px nav row */
  --header-util-h: 70px;
  --header-nav-h: 75px;
  --header-edge: 24px;        /* pill row right edge = vw - 24 */
  --header-h-mobile: 80px;
  --actionbar-h: 56px;
  --tap-min: 44px;

  --focus-ring: 3px solid var(--azure-deep);
  --focus-offset: 2px;

  /* ---- The one button atom ---- */
  --pill-h: 48px;
  --pill-h-util: 44px;
  --pill-pad: 0 26px;
  --pill-fill: var(--azure-tint);
  --pill-border: 1px solid var(--ink);
  --pill-border-on-dark: 1px solid rgba(255, 255, 255, 0.55);
  --pill-text: var(--ink);
  --pill-fill-hover: var(--azure-deep);
  --pill-text-hover: var(--white);

  /* ---- Service card hover (hanoverendo/03 Mechanism: the Izmir component) ---- */
  --card-under:       var(--ink);   /* the tint is the underlay the image dims onto */
  --card-img-opacity: 0.3;          /* --image-opacity */
  --card-img-zoom:    1.25;         /* c4-image-zoom-in */
  --card-key-w:       3px;          /* --border-width (recipe correction: not 1px) */
  --card-key-inset:   15px;         /* --border-margin (recipe correction: not 16px) */
  --card-pad:         32px;         /* figcaption padding: calc(--padding * 2) */
  --keyline:          var(--azure-on-dark);   /* --border-color: palette-5 light blue */

  /* ---- Motion ---- */
  --t-fade: 0.4s;             /* dropdown fade, measured */
  --t-fast: 0.25s ease;
  --t-med: 0.35s ease;
  --t-card: 0.6s ease;        /* --transition-duration: 600ms */
  --t-cap-out: 0.4s ease;     /* rest caption fades on hover, 400ms */
  --t-cap-in: 0.6s ease 0.3s; /* resting transition: 600ms with a 300ms delay */
  --t-header: 0.4s ease-in-out;
}

/* ---------------------------------------------------------------------------
   Display-scale steps. hanoverendo-mobile/09 records the family freezing every
   functional size and cutting only display type; V16 found the 601-900 window
   had no step at all and that 1024 wrapped headings and doctor names. Three
   steps now cover 1166 -> 900 -> 600.
   --------------------------------------------------------------------------- */

/* compact-nav tier */
@media (max-width: 1166px) {
  :root {
    --size-h2: 44px;           --lh-h2: 53px;
    --size-doc-name: 24px;     --lh-doc-name: 31px;
    --size-caption: 24px;      --lh-caption: 31px;
    --size-nav: 14px;
    --logo-w: var(--logo-w-compact);
  }
}

/* tablet tier (mobile header from here down) */
@media (max-width: 900px) {
  :root {
    --size-h1: 33px;           --lh-h1: 42px;
    --size-h2: 40px;           --lh-h2: 48px;
    --size-h2-contact: 28px;   --lh-h2-contact: 36px;
    --size-slab-title: 29px;   --lh-slab-title: 37px;
    --size-practice: 26px;     --lh-practice: 34px;
    --size-doc-name: 23px;     --lh-doc-name: 30px;
    --size-caption: 23px;      --lh-caption: 30px;
    --size-footer-head: 26px;  --lh-footer-head: 36px;
  }
}

/* phone tier - homepage-spec.md section 9 scale table */
@media (max-width: 600px) {
  :root {
    --size-h1: 28px;           --lh-h1: 39px;
    --size-h2: 37px;           --lh-h2: 45px;
    --size-h2-contact: 26px;   --lh-h2-contact: 34px;
    --size-slab-title: 26px;   --lh-slab-title: 34px;
    --size-practice: 24px;     --lh-practice: 31px;
    --size-doc-name: 22px;     --lh-doc-name: 28px;
    --size-caption: 22px;      --lh-caption: 28px;
    --size-footer-head: 24px;  --lh-footer-head: 34px;
    --band-pad: var(--band-pad-phone);
    --band-frame: 0px;
  }
}