/* Glow Getter — design tokens
   Palette and scale derived from the Dermato reference, warmed slightly
   toward the hero photograph's beige. */

:root {
  /* Surfaces */
  --cream:        #FDF7EF;  /* page background */
  --cream-deep:   #F7ECDF;  /* alternating section blocks */
  --card:         #FFFDF9;  /* raised cards */
  --ink:          #101010;  /* rare dark blocks */

  /* Text */
  --brown:        #633B2C;  /* headings, primary text */
  --brown-muted:  #7A685D;  /* body copy */

  /* Accent */
  --bronze:       #986A3E;
  --bronze-deep:  #70441B;  /* hover / pressed */
  --bronze-10:    rgba(152, 106, 62, 0.10);
  --bronze-06:    rgba(152, 106, 62, 0.06);

  /* Rose-copper gradient sampled from the logo artwork: it sweeps
     #B06152 -> #D19C7F -> #B66D5C across the wordmark. Weighted to the
     deeper end here so white text keeps its contrast. */
  --grad:       linear-gradient(100deg, #CE9A7F 0%, #BC7660 48%, #A85647 100%);
  --grad-hover: linear-gradient(100deg, #BE8468 0%, #A85E4A 48%, #90453A 100%);
  --grad-solid: #B06152;  /* flat fallback / borders */

  /* 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%;
  background: currentColor;
  flex: none;
}