/* =====================================================================
   DESIGN TOKENS — The Maternity Plan
   Brand: coral/rose accents, blush backgrounds, Playfair Display +
   DM Sans. Clean, modern, feminine. Warm, not preachy — an experienced
   equal, not a life coach.
   ===================================================================== */

:root {
  /* ---- Color ---- */
  --color-bg: #FBF1F0;              /* blush pink page background */
  --color-surface: #FFFBFA;         /* card/panel surface, warm off-white */
  --color-surface-raised: #FFFFFF;  /* modals, focused inputs */
  --color-coral: #E8836F;           /* primary accent — buttons, active states */
  --color-coral-dark: #D06B57;      /* hover/pressed */
  --color-rose: #C85C7C;            /* secondary accent — links, highlights */
  --color-text: #3A2B2B;            /* warm near-black, not pure black */
  --color-text-muted: #8C7873;      /* secondary text, captions */
  --color-border: #F0DEDA;          /* hairline borders on blush */
  --color-sage: #7FA88F;            /* confirmations, "on track" states */
  --color-amber: #D9A24B;           /* caution — e.g. rate disclaimers */

  /* ---- Type ---- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;

  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* ---- Space ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Shape ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}

* { box-sizing: border-box; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

/* Visible keyboard focus everywhere — non-negotiable */
:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 2px;
}

button, .btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.btn-primary {
  background: var(--color-coral);
  color: #fff;
  border: none;
  padding: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn-primary:hover { background: var(--color-coral-dark); }

/* Print: hide chrome, show only the section actively targeted via
   printSection() — not every .printable block on the page. See
   js/print-helper.js. */
@media print {
  body * { visibility: hidden; }
  .printable-active, .printable-active * { visibility: visible; }
  .printable-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .no-print { display: none !important; }
}