/*
  The Parent Diaries — Mobile-first design system
  Base viewport: 390px (iPhone 14)
  Min font: 16px body · 20px+ for writing UI
  Min tap target: 44px
  Media queries: min-width only — no max-width queries anywhere
  Spacing: base unit 16px, scale in multiples
*/

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ───────────────────────────────────── */
:root {
  /* Colour */
  --charcoal: #1A1A1A;
  --gold:     #8B6830;   /* legibility-corrected — never use #B8976A as text on cream */
  --cream:    #F7F5F2;
  --white:    #FFFFFF;
  --ink:      #1A1A1A;
  --mid:      #3A3A3A;
  --muted:    #5A5A5A;
  --border:   #E4E0DA;
  --red:      #C0392B;
  --green:    #4a7c59;

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;

  /* Spacing — base 16px, multiples */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* Layout */
  --page-pad: 20px;
  --max-w:    800px;
  --tap:      44px;   /* minimum tap / click target height */
}

/* ── Base ─────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── Images — always fluid, never fixed ──────────────── */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Inputs — 16px minimum prevents iOS auto-zoom ────── */
input,
textarea,
select {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}

/* ── Buttons — 44px minimum tap target ───────────────── */
button {
  min-height: var(--tap);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a { -webkit-tap-highlight-color: transparent; }

/* Anchor elements used as buttons */
a[class*="btn"] {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}