/* =========================================================
   Dr. Boechat — Design Tokens
   Colors, type, spacing, radii, shadows, easings.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap");

:root {
  /* ---------- Color: brand purple scale ---------- */
  --purple-900: #1F0731;
  --purple-800: #2D0947;
  --purple-700: #3F0C63;   /* PRIMARY brand color */
  --purple-500: #6B3D90;
  --purple-300: #B49ECB;
  --purple-200: #D8CBE4;
  --purple-100: #EDE6F3;
  --purple-050: #F8F5FB;

  /* ---------- Color: neutrals ---------- */
  --ink:       #1A1320;
  --ink-2:     #54475F;
  --ink-3:     #8A7E94;
  --line:      #E8E2EC;
  --paper:     #FFFFFF;
  --cream:     #FAF7F2;

  /* ---------- Semantic foreground/background ---------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-brand: var(--purple-700);
  --fg-on-dark: var(--paper);

  --bg-page:   var(--paper);
  --bg-tint:   var(--purple-050);
  --bg-cream:  var(--cream);
  --bg-dark:   var(--purple-700);
  --bg-deeper: var(--purple-900);

  --border-soft: var(--purple-200);
  --border-mid:  var(--purple-300);
  --border-strong: var(--purple-500);
  --hairline: var(--line);

  /* Validation (medical site uses these very sparingly) */
  --warn: #B0362F;

  /* ---------- Type ---------- */
  --font-sans: "Manrope", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Step scale — design width 1440 */
  --fs-display-1: 88px;
  --lh-display-1: 96px;
  --fs-display-2: 64px;
  --lh-display-2: 72px;
  --fs-h1: 48px; --lh-h1: 56px;
  --fs-h2: 32px; --lh-h2: 40px;
  --fs-h3: 22px; --lh-h3: 30px;
  --fs-body-lg: 19px; --lh-body-lg: 30px;
  --fs-body:    17px; --lh-body:    28px;
  --fs-body-sm: 15px; --lh-body-sm: 24px;
  --fs-caption: 13px; --lh-caption: 18px;
  --fs-eyebrow: 12px; --lh-eyebrow: 16px;

  --fs-serif-display: 64px; --lh-serif-display: 72px;
  --fs-serif-quote:   32px; --lh-serif-quote:   44px;

  /* ---------- Spacing (8pt grid) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 160px;

  /* ---------- Radii ---------- */
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-frame: 20px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --bw-hair: 1px;
  --bw-light: 1.5px;
  --bw-strong: 2px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(31, 7, 49, 0.04), 0 1px 1px rgba(31, 7, 49, 0.03);
  --shadow-2: 0 4px 16px rgba(31, 7, 49, 0.06), 0 1px 2px rgba(31, 7, 49, 0.04);
  --shadow-3: 0 12px 40px rgba(31, 7, 49, 0.10), 0 2px 6px rgba(31, 7, 49, 0.05);

  /* ---------- Easing ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.68, 0.18);

  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 600ms;

  /* ---------- Layout ---------- */
  --container: 1240px;
  --gutter-mobile: 24px;
  --gutter-desktop: 80px;
}

/* =========================================================
   Semantic element styles — drop-in defaults.
   ========================================================= */

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
a:hover { opacity: 0.75; }

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--hairline);
  margin: var(--s-6) 0;
}

::selection {
  background: var(--purple-700);
  color: var(--paper);
}

/* =========================================================
   Utility classes — used by previews & UI kit.
   ========================================================= */

.display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display-1); font-weight: 800; letter-spacing: -0.02em; }
.display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display-2); font-weight: 700; letter-spacing: -0.015em; }
.body-lg   { font-size: var(--fs-body-lg);   line-height: var(--lh-body-lg);   font-weight: 400; color: var(--fg-2); }
.body-sm   { font-size: var(--fs-body-sm);   line-height: var(--lh-body-sm);   font-weight: 400; color: var(--fg-2); }
.caption   { font-size: var(--fs-caption);   line-height: var(--lh-caption);   font-weight: 500; letter-spacing: 0.04em; color: var(--fg-3); }
.eyebrow   { font-size: var(--fs-eyebrow);   line-height: var(--lh-eyebrow);   font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-brand); }

.serif-display { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-serif-display); line-height: var(--lh-serif-display); letter-spacing: -0.005em; }
.serif-quote   { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-serif-quote);   line-height: var(--lh-serif-quote); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-in);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 3px; }

.btn-primary { background: var(--purple-700); color: var(--paper); border-color: var(--purple-700); }
.btn-primary:hover { background: var(--purple-800); border-color: var(--purple-800); }

.btn-outline { background: transparent; color: var(--purple-700); border-color: var(--purple-300); }
.btn-outline:hover { background: var(--purple-050); border-color: var(--purple-500); }

.btn-on-dark { background: var(--paper); color: var(--purple-700); border-color: var(--paper); }
.btn-on-dark:hover { background: var(--purple-100); border-color: var(--purple-100); }

/* Frames */
.frame {
  border-radius: var(--radius-frame);
  border: var(--bw-light) solid var(--border-soft);
  background: var(--paper);
}
.frame-mid { border-color: var(--border-mid); border-width: var(--bw-strong); }
.frame-filled { background: var(--purple-700); border: 0; }

/* Card */
.card {
  background: var(--paper);
  border: var(--bw-light) solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--s-5);
  transition: border-color var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); }

/* Eyebrow + heading combo */
.section-head { display: flex; flex-direction: column; gap: var(--s-3); }