/* Glow Getter — design tokens
   Scale and structure derived from the Dermato reference.

   The PALETTE is not here. It lives in theme-cream.css and theme-dark.css,
   one of which is loaded ahead of this file — see tools/build-site.js. Only
   the colour tokens differ between the two; everything below is shared, so
   adding a token here is a one-place change and adding a colour is a
   two-place one. */

:root {
  /* Type */
  --serif:  "Hedvig Letters Serif", Georgia, serif;
  --sans:   "General Sans", system-ui, -apple-system, sans-serif;
  --label:  "Geist", system-ui, sans-serif;

  /* Radii — deliberately varied, matching the reference */
  --r-pill:  100px;
  --r-lg:    30px;
  --r-md:    20px;
  --r-sm:    10px;

  /* Layout */
  --maxw:    1200px;
  --gutter:  24px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown-muted);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--brown);
  line-height: 1.1;
  margin: 0;
}

/* Pill badge with a leading dot, as the reference uses for every section
   label — not plain uppercase text. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  color: var(--bronze);
  background: var(--bronze-10);
  border-radius: var(--r-pill);
  padding: 8px 16px 8px 14px;
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 100%;
  /* Defaults to currentColor, which is what this always was - so a theme
     that does not set --eyebrow-dot is unaffected, and the dot keeps
     following its own eyebrow (white on the hero photo, pale pink on the
     Million Dollar block). No theme sets it since gold was killed on
     20 Aug 2026, but the hook stays: it is the only safe way for a theme
     to recolour the dot without touching the white and pink ones. */
  background: var(--eyebrow-dot, currentColor);
  flex: none;
}