/* ============================================================
   brand.css — Sunrise Dental design tokens + base
   Warm editorial · sunrise oranges · serif display + Avenir
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand color ---- */
  --orange:        #C8551D;   /* primary — confident sunrise */
  --orange-hover:  #A9420F;
  --rust:          #8C3208;   /* deepest warm */
  --gold:          #D49A2C;   /* secondary accent */
  --gold-soft:     #E9C77E;

  /* accent is what the Tweaks panel drives */
  --accent:        var(--orange);
  --accent-hover:  color-mix(in oklab, var(--accent) 82%, #000);

  /* ---- Warm neutrals ---- */
  --paper:    #FBF6EF;   /* page background */
  --surface:  #FFFFFF;   /* cards / panels */
  --stone:    #F1E8DC;   /* warm section fill */
  --stone-deep:#E9DDCC;
  --white:    #FFFFFF;

  --ink:      #2B2118;   /* headings — warm near-black */
  --ink-body: #4C4136;   /* body copy */
  --ink-soft: #7A6C5C;   /* muted / captions */
  --line:     #E7DBCB;   /* hairlines */
  --line-soft:#F0E7DA;

  /* status */
  --open-green: #2E7D52;

  /* ---- Type ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Avenir Next", "Avenir", "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Shape (Tweakable) ---- */
  --radius:    3px;
  --radius-lg: 4px;

  /* ---- Rhythm (Tweakable density) ---- */
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(43, 33, 24, 0.05), 0 2px 8px rgba(43, 33, 24, 0.04);
  --shadow-md: 0 8px 24px rgba(43, 33, 24, 0.08), 0 2px 6px rgba(43, 33, 24, 0.05);
  --shadow-lg: 0 24px 60px rgba(43, 33, 24, 0.16), 0 6px 18px rgba(43, 33, 24, 0.08);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-body);
  background: var(--paper);
  letter-spacing: 0.005em;
  text-rendering: optimizeLegibility;
}

/* ---- Headings: editorial serif ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 500; }
h2 { font-size: clamp(2.05rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.008em; }
h4 { font-size: 1.2rem; letter-spacing: -0.004em; }

p { text-wrap: pretty; }

a { color: var(--accent); transition: color 0.2s var(--ease); }
a:hover { color: var(--accent-hover); }

strong { font-weight: 700; color: var(--ink); }

::selection { background: var(--gold-soft); color: var(--ink); }

img.assoc-placeholder { opacity: 0.9; }

/* Skip link + anchor helpers used by injected script */
.anchor { position: relative; top: -110px; visibility: hidden; }