/* haloe "calm" design tokens + shared components (Oct 2026).
   Cream page, white 16px cards (Atelier scale), gold accent, Georgia serif
   titles, Poppins text. (Tan Ashford stays only for the haloe wordmark.) Loaded by intake.html and before-your-session.html — one copy, so the
   two pages can't drift. Page-specific layout stays inline in each page.
   Sizes are px on purpose: pages keep html{font-size:78%} for the shared nav,
   so rem would shrink the content. */
@font-face {
  font-family: 'Tan Ashford';
  src: url('fonts/TAN-ASHFORD.woff2') format('woff2'),
       url('fonts/TAN-ASHFORD.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

html { font-size: 78%; }

:root {
  --page-bg: var(--c-cream, #F5F0E8);
  --card: var(--c-white, #FFFFFF);
  --fill: #EFE9DD;          /* warm grey: inactive controls, input wells */
  --fill-hover: #E8E1D2;
  --ink: #1C1A16;
  --muted: #6B6354;
  --gold: var(--c-gold, #C8A96E);
  --gold-deep: var(--c-gold-deep, #7A5C22);
  --ring: rgba(200,169,110,0.5);
  --shadow: 0 1px 2px rgba(60,45,20,0.04), 0 6px 20px rgba(60,45,20,0.05);
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;      /* titles */
  --serif-text: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; /* softer serif for sentences */
}

body { background: var(--page-bg); color: var(--ink); font-size: var(--fs-input, 16px); }

nav { padding: var(--s3, 12px) 20px; }

@media (min-width: 861px) { nav { padding: 14px 40px; } }

/* page frame: 16px gutters, clear of the fixed nav */
.wrap { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding: 88px var(--s4, 16px) var(--s5, 24px); }

h1 { font-family: var(--serif); font-weight: normal; font-size: var(--fs-title, 28px); line-height: 1.15; letter-spacing: -0.012em; margin: 0 0 var(--s3, 12px); color: var(--ink); }

.intro-line { font-size: var(--fs-body, 15px); line-height: 1.65; color: var(--muted); max-width: none; }

.step-lede { font-family: var(--serif-text); font-size: 21px; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 20px; }

.progress-step, .section-label { font-size: var(--fs-label, 12px); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }

.field, .card { background: var(--card); border: 1px solid rgba(13,13,13,0.07); border-radius: 16px; padding: var(--s4, 16px); margin: 0 0 var(--s3, 12px); box-shadow: var(--shadow); }