/* The Birthing Doula — every design token and base style, flattened into one file.
   Generated from styles.css + tokens/*.css. The web-font request is a <link> in the page head,
   not an import here, so this file is a plain rule list that can be pasted anywhere. */

/* ===== tokens/fonts.css ===== */
/* Three faces, loaded in one request exactly as specified.
   Marcellus ships in ONE style only — never ask it for a real italic.
   Cormorant Garamond is loaded for its ITALIC, used only for emphasis inside headings. */

:root{
--font-display:"Marcellus",Georgia,"Times New Roman",serif;
--font-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
--font-emphasis:"Cormorant Garamond",Georgia,serif;
}

/* ===== tokens/colors.css ===== */
/* Measured palette. Do not add colours: no greys, no blues, no near-blacks beyond --foot.
   THE TONAL RULE: there are no dark content sections. The deepest surface in the page body is
   --dusty-400 (62% L / 14% S). Depth comes from warmth and hue shift, never from darkness.
   --foot is the single exception and is page furniture, not a content section. */
:root{
--shell:#FCFAF8;        /* page ground */
--cream:#F5F0EA;        /* alternating section */
--linen:#ECE6DF;        /* third ground, cards */
--dusty-100:#DDD0DD;
--dusty-200:#CBB9CB;
--dusty-300:#BCA8BD;    /* main dusty band */
--dusty-400:#AA91AC;    /* deepest CONTENT surface — large text only */
--ink:#4B304F;          /* body text, warm aubergine */
--ink-soft:#765C7A;     /* captions, secondary */
--purple-500:#8D61AD;   /* BRAND — buttons, fills */
--purple-link:#714790;  /* purple as text/links on light grounds */
--gold-400:#FFBC59;     /* BRAND — rules, dashes, the logo. NEVER text. */
--gold-text:#925E11;    /* gold as text on light grounds */
--foot:#221826;         /* footer ground — the ONLY dark surface */
--foot-hd:#E8DFEA;      /* footer headings */
--foot-tx:#C9B6CE;      /* footer body and links */
--foot-ln:#3B2D40;      /* footer hairlines */
--foot-fine:#9B86A2;    /* footer fine print — 5.16:1 on --foot */

/* Low-opacity tints of the palette itself — hairlines, shadows, photo overlays.
   These introduce no new hues; elevation is always tinted toward --ink. */
--ink-a08:rgba(75,48,79,.08);
--ink-a14:rgba(75,48,79,.14);
--ink-a65:rgba(75,48,79,.65); /* the ONLY approved photo overlay: logo reads at 4.79:1 over it */
--gold-a40:rgba(255,188,89,.40);

/* Semantic aliases — author against these. */
--bg-page:var(--shell);--bg-alt:var(--cream);--bg-third:var(--linen);
--bg-dusty:var(--dusty-300);--bg-dusty-deep:var(--dusty-400);
--surface-card:var(--linen);--surface-card-light:var(--shell);--surface-field:var(--shell);
--text-ink:var(--ink);--text-muted:var(--ink-soft);--text-heading:var(--ink);
--text-emphasis:var(--purple-link);--text-link:var(--purple-link);--text-eyebrow:var(--gold-text);
--rule-decorative:var(--gold-400);
--border-hairline:var(--ink-a14);--border-field:var(--dusty-200);
--focus-ring:var(--purple-link);
}

/* On the --dusty-300 band three of the above fail (gold-text 2.47, purple-link 3.15).
   Anything inside .on-dusty switches to these. */
.on-dusty{
--text-eyebrow:var(--ink);      /* 5.16 */
--rule-decorative:var(--ink);
--text-emphasis:var(--foot);    /* 7.72 */
--text-link:var(--foot);
--text-muted:var(--ink);        /* ink-soft is not safe on the band */
--text-ink:var(--ink);
}

/* ===== tokens/typography.css ===== */
/* Headings are Marcellus 400, -0.02em, 1.2, and NEVER uppercase.
   Tracked uppercase is used for eyebrows only — nothing else in the system is uppercase. */
:root{
--text-display-1:clamp(40px,6.4vw,74px);
--text-display-2:clamp(33px,4.6vw,54px);
--text-h1:clamp(30px,3.8vw,45px);
--text-h2:clamp(26px,3vw,36px);
--text-h3:22px;
--text-lead:19px;--text-body-lg:17px;--text-body:16px;--text-small:14px;
--text-eyebrow-size:11.5px;
--text-numeral:2.2rem;
--text-step-title:1.05rem;

--weight-display:400;--weight-body:400;--weight-body-light:300;--weight-body-strong:500;--weight-eyebrow:500;
--leading-display:1.2;--leading-body:1.5;--leading-step-body:1.65;--leading-numeral:1;
--tracking-display:-0.02em;--tracking-body:0;--tracking-eyebrow:0.22em;--tracking-button:0.08em;
--emphasis-scale:1.06em;

/* The heading treatment's furniture */
--rule-eyebrow-w:22px;--rule-dash-w:44px;--rule-h:1px;--dash-gap:16px;
}

/* ===== tokens/spacing.css ===== */
/* 8px based but generous. If a layout feels tight, it is off-brand. */
:root{
--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;
--space-6:48px;--space-7:64px;--space-8:96px;--space-9:128px;--space-10:160px;
--section-y:clamp(96px,10vw,160px); /* @kind spacing */
--section-y-tight:clamp(64px,7vw,96px); /* @kind spacing */
--gutter:clamp(20px,5vw,64px); /* @kind spacing */
--grid-gap:34px;
--container:1180px;--container-narrow:720px;--measure:64ch;
}

/* ===== tokens/radii.css ===== */
:root{
--radius-pill:999px;--radius-card:18px;--radius-field:12px;--radius-sm:8px;
--radius-arch:200px 200px 0 0;  /* large top radius, SQUARE bottom */
--radius-oval:50%;
--arc-rise-sm:40px;--arc-rise-md:80px;--arc-rise-lg:120px;
}

/* ===== tokens/elevation.css ===== */
/* Very soft, always tinted toward --ink. Never grey. Most surfaces sit flat,
   separated by colour rather than shadow. */
:root{
--shadow-flat:none;
--shadow-soft:0 1px 2px rgba(75,48,79,.04),0 12px 28px -18px rgba(75,48,79,.16);
--shadow-raised:0 2px 6px rgba(75,48,79,.05),0 22px 48px -24px rgba(75,48,79,.20);
--shadow-inset-field:inset 0 1px 2px rgba(75,48,79,.05);
--focus-shadow:0 0 0 3px rgba(113,71,144,.28);
}

/* ===== tokens/motion.css ===== */
/* Nothing is in a hurry. Fades and small rises only — no bounce, no spring, no scale. */
:root{
--ease-calm:cubic-bezier(.33,.02,.28,1); /* @kind other */
--dur-fast:180ms; /* @kind other */
--dur-base:300ms; /* @kind other */
--dur-slow:520ms; /* @kind other */
--rise-hover:translateY(-3px); /* @kind other */
--press-shift:translateY(1px); /* @kind other */
}

/* ===== tokens/layout.css ===== */
/* The only class-based rules in the system: responsive grids the spec pins to explicit
   breakpoints, which inline component styles cannot express. */
.tbd-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap)}
@media (max-width:900px){.tbd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tbd-steps{grid-template-columns:minmax(0,1fr)}}
.tbd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center}
@media (max-width:860px){.tbd-split{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}}
.tbd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-4)}
.tbd-footer-grid{display:grid;grid-template-columns:1.1fr repeat(3,minmax(0,1fr));gap:var(--space-6)}
@media (max-width:860px){.tbd-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tbd-footer-grid{grid-template-columns:minmax(0,1fr)}}

/* Dropdown motion — the only keyframes in the system. Fades and small rises, calm ease. */
@keyframes tbd-fade{from{opacity:0}to{opacity:1}}
@keyframes tbd-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes tbd-unfurl{from{opacity:0;transform:scaleY(.86)}to{opacity:1;transform:scaleY(1)}}
@keyframes tbd-slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes tbd-item{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* ===== tokens/base.css ===== */
:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--text-ink);font-family:var(--font-body);font-weight:var(--weight-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-heading);line-height:var(--leading-display);letter-spacing:var(--tracking-display);text-transform:none;margin:0}
h1 em,h2 em,h3 em{display:block;font-family:var(--font-emphasis);font-style:italic;font-weight:400;font-size:var(--emphasis-scale);color:var(--text-emphasis)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--gold-a40);transition:border-color var(--dur-base) var(--ease-calm),color var(--dur-base) var(--ease-calm)}
a:hover{color:var(--ink);border-bottom-color:var(--gold-400)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
img{max-width:100%}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}