/* ============================================================
   Born to Know — Color & Type Tokens
   ------------------------------------------------------------
   Editorial parenting brand. Cream backgrounds, mustard gold
   accents, deep forest CTAs. Playfair Display + Lora + Inter.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Color: Surfaces ---------- */
  --btk-bg:               #FAF6EE;  /* page background, cream/ivory */
  --btk-surface:          #FFFCF5;  /* card / surface, off-white */
  --btk-section:          #F4EDD8;  /* section tint, warm cream */
  --btk-footer:           #F0E7CC;  /* footer tint, deeper cream */

  /* ---------- Color: Brand ---------- */
  --btk-gold:             #C8A24A;  /* primary accent — mustard gold */
  --btk-gold-hover:       #A8851F;  /* darker gold for hover */
  --btk-forest:           #2C3A24;  /* primary CTA — deep forest green */
  --btk-forest-hover:     #1F2A19;  /* darker green for hover */

  /* ---------- Color: Text ---------- */
  --btk-ink:              #0F0F0F;  /* headings, near-black */
  --btk-body:             #3D3A33;  /* body, warm dark grey */
  --btk-muted:            #6B655B;  /* secondary / muted */

  /* ---------- Color: Lines & States ---------- */
  --btk-border:           #E8DFCC;  /* subtle cream-brown */
  --btk-live:             #4A7C59;  /* muted green — live indicator */
  --btk-error:            #A8584A;  /* subtle terracotta — error / X */

  /* ---------- Color: Shadow ---------- */
  --btk-shadow-color:     rgba(15, 15, 15, 0.06);
  --btk-shadow-sm:        0 1px 2px rgba(15, 15, 15, 0.04);
  --btk-shadow-md:        0 4px 16px rgba(15, 15, 15, 0.06);
  --btk-shadow-lg:        0 12px 40px rgba(15, 15, 15, 0.08);

  /* ---------- Type: Families ---------- */
  --btk-font-display:     'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --btk-font-body:        'Lora', Georgia, 'Times New Roman', serif;
  --btk-font-ui:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Type: Scale ---------- */
  --btk-fs-display:       clamp(80px, 11vw, 160px);  /* hero stat numbers */
  --btk-fs-h1:            clamp(48px, 6vw, 72px);
  --btk-fs-h2:            clamp(36px, 4.5vw, 52px);
  --btk-fs-h3:            clamp(24px, 2.6vw, 32px);
  --btk-fs-lead:          22px;                       /* big paragraph */
  --btk-fs-body:          18px;
  --btk-fs-small:         15px;
  --btk-fs-eyebrow:       13px;
  --btk-fs-micro:         12px;

  /* ---------- Type: Line-height & tracking ---------- */
  --btk-lh-tight:         1.08;
  --btk-lh-snug:          1.25;
  --btk-lh-normal:        1.55;
  --btk-lh-loose:         1.7;
  --btk-tracking-eyebrow: 0.2em;
  --btk-tracking-tight:   -0.01em;

  /* ---------- Layout ---------- */
  --btk-content-max:      1200px;
  --btk-pad-section-lg:   96px;
  --btk-pad-section-sm:   64px;
  --btk-pad-side:         clamp(20px, 5vw, 48px);

  /* ---------- Radii ---------- */
  --btk-r-button:         8px;
  --btk-r-card:           12px;
  --btk-r-pill:           999px;

  /* ---------- Motion ---------- */
  --btk-ease:             cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */
  --btk-dur-fast:         200ms;
  --btk-dur:              400ms;
  --btk-dur-slow:         600ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--btk-bg);
  color: var(--btk-body);
  font-family: var(--btk-font-body);
  font-size: var(--btk-fs-body);
  line-height: var(--btk-lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--btk-font-display);
  color: var(--btk-ink);
  font-weight: 700;
  line-height: var(--btk-lh-tight);
  letter-spacing: var(--btk-tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--btk-fs-h1); font-weight: 800; }
h2 { font-size: var(--btk-fs-h2); }
h3 { font-size: var(--btk-fs-h3); line-height: var(--btk-lh-snug); }

p {
  font-family: var(--btk-font-body);
  font-size: var(--btk-fs-body);
  line-height: var(--btk-lh-loose);
  color: var(--btk-body);
  text-wrap: pretty;
}

.btk-lead {
  font-size: var(--btk-fs-lead);
  line-height: 1.55;
  color: var(--btk-body);
}

.btk-eyebrow {
  font-family: var(--btk-font-ui);
  font-size: var(--btk-fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--btk-tracking-eyebrow);
  color: var(--btk-muted);
}

.btk-display-number {
  font-family: var(--btk-font-display);
  font-weight: 700;
  font-size: var(--btk-fs-display);
  line-height: 0.95;
  color: var(--btk-ink);
  letter-spacing: -0.02em;
}

em, .btk-italic {
  font-style: italic;
}

small, .btk-small { font-size: var(--btk-fs-small); }

a {
  color: var(--btk-gold-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--btk-dur-fast) var(--btk-ease);
}
a:hover { color: var(--btk-forest); }