/*
 * Design tokens — the ONLY place colours, fonts, spacing and radii are defined.
 * Every other stylesheet references these custom properties. To rebrand,
 * edit this file and nothing else.
 *
 * Direction A · Blush & Sage.
 */

/* ---- Self-hosted fonts (SIL Open Font License; see /assets/fonts/) -----
 * ?v= is the first 8 hex chars of each file's md5; update it if a font file
 * changes. CSS and image URLs are versioned by asset() in app/bootstrap.php. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2?v=efeea72c") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2?v=bf1e09fb") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-italic.woff2?v=9b8a16c9") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mulish-latin-400-normal.woff2?v=7ef9dd98") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/mulish-latin-600-normal.woff2?v=9b22febd") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mulish-latin-700-normal.woff2?v=37c0b690") format("woff2");
}

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --color-bg:            #FCF6F4;   /* page background */
  --color-band:          #F3E7E2;   /* alternate band */
  --color-surface:       #FFFFFF;   /* cards */
  --color-border:        #EADBD5;   /* hairlines, card borders */
  --color-text:          #3D3B3A;   /* body text (10.4:1 on bg) */
  --color-text-muted:    #6A5F5C;   /* secondary text (5.8:1 on bg, 5.1:1 on band) */
  --color-heading:       #3D3B3A;
  --color-accent:        #A85A55;   /* buttons, links (4.6:1 on bg) */
  --color-accent-hover:  #7F3F3B;   /* (7.3:1 on bg) */
  --color-link:          var(--color-accent);
  --color-link-hover:    var(--color-accent-hover);
  --color-primary:       var(--color-accent);
  --color-on-primary:    #FFFFFF;   /* text on accent (4.9:1) */
  --color-sage-text:     #5F6650;   /* eyebrow labels (5.6:1 on bg) */
  --color-sage-fill:     #DDE0D2;
  --color-blush-fill:    #EBCBC3;
  --color-footer-bg:     #3D3B3A;
  --color-footer-text:   #F3E7E2;   /* (9.2:1) */
  --color-highlight:     #F0D3CC;   /* rose marker behind **bold** copy */
  --color-rule:          #9AA088;   /* thin sage rules around pull quotes */
  --color-rule-rose:     var(--color-accent); /* hand-drawn line under section headings */
  --shadow-card:         0 14px 30px rgba(61, 59, 58, 0.10); /* lifted card */
  --shadow-header:       0 6px 20px rgba(61, 59, 58, 0.08);  /* compact sticky header */
  --shadow-panel:        0 16px 40px rgba(61, 59, 58, 0.14); /* specialties panel */
  --color-focus:         var(--color-accent);
  --color-notice-bg:     #fef3c7;   /* editorial / TODO notices */
  --color-notice-border: #b45309;
  --color-notice-text:   #78350f;

  /* ---- Typography ------------------------------------------------------ */
  --font-body:    "Mulish", system-ui, sans-serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-size-base: 1.0625rem;  /* 17px */
  --font-size-sm:   0.9375rem;  /* 15px */
  --font-size-xs:   0.8125rem;  /* 13px: eyebrow labels */
  --font-size-lg:   1.1875rem;  /* 19px */
  --font-size-h3:   1.6875rem;  /* 27px: card headings */
  --font-size-h2:   clamp(2.125rem, 1.6rem + 2vw, 2.875rem);   /* 34px -> 46px */
  --font-size-h1:   clamp(2.625rem, 1.8rem + 3.5vw, 4.125rem); /* 42px -> 66px */
  --font-size-h1-lg: var(--font-size-h1);
  --font-size-lead: 1.3125rem;  /* 21px: a body's first paragraph */
  --font-size-price: clamp(2.5rem, 2rem + 2vw, 3.5rem);           /* 40px -> 56px rate cards */
  --line-height-lead: 1.6;
  --font-size-quote: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);       /* 28px -> 40px pull quotes */
  --font-size-statement: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);     /* 32px -> 52px home statement */
  --quote-measure: 42.5rem;                                         /* 680px */
  --line-height:    1.65;
  --line-height-tight: 1.1;      /* h2 */
  --line-height-h1: 1.04;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold:   700;
  --font-weight-heading: 600;
  --letter-spacing-eyebrow: 0.18em;

  /* ---- Spacing --------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: var(--space-8); /* vertical padding of page sections and bands */
  --gutter:  var(--space-4);     /* side padding on small screens */
  --measure: 47.5rem;            /* 760px reading width */
  --measure-lead: 42.5rem;       /* 680px lead paragraphs */
  --measure-wide: 60rem;         /* 960px two-column sections */
  --band-pad: calc(var(--section-pad) * 0.75); /* vertical padding of content bands */
  --wrap:    75rem;              /* 1200px max content width */

  /* ---- Shape ----------------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;          /* 20px cards */
  --radius-pill: 999px;          /* buttons */
  --radius-arch: 240px 240px 28px 28px;
  --inset-width: 40%;            /* category photo wrapped by the opening copy, share of the reading column */
  --inset-max: 460px;
  --inset-gap: 2.5rem;           /* 40px between the photo and the text beside it */
  --inset-ratio: 4 / 5;          /* portrait beside the copy on wide screens */
  --inset-ratio-sm: 3 / 2;       /* full width above the copy on phones */
  --radius-inset: 24px;
  --radius-inset-sm: 20px;
  --border-width: 1px;
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;

  /* ---- Component sizes ------------------------------------------------- */
  --logo-height: 76px;
  --logo-height-compact: 48px;   /* sticky header after scrolling */
  --logo-height-sm: 44px;        /* phones, always */
  --header-offset: 5rem;         /* scroll-padding-top: room for the compact sticky header */
  --button-padding: 16px 28px;
  --card-padding: 32px;
  --hero-media-min-height: 500px;
  --hero-media-min-height-sm: 18rem;  /* phones: columns stack */
  --hero-focus: 38% 55%;         /* object-position: keeps the mother and baby centred in the arch */
  /* object-position per category photo: where the subject sits, so it survives the portrait, 3:2 and card crops. */
  --focus-postpartum-mental-health: 66% 50%;   /* woman at sunset, right of centre */
  --focus-fertility-pregnancy: 30% 50%;        /* belly against the window, left */
  --focus-relationships-couples: 48% 50%;      /* clasped hands, centre */
  --focus-motherhood-identity-burnout: 70% 50%;/* woman facing the sea, right */
  --focus-pregnancy-loss: 50% 60%;             /* daisies, lower half */
  --focus-military-families: 50% 20%;          /* the embrace (portrait photo): faces near the top */
  --flourish-width: 10rem;       /* hand-drawn line under the home statement */
  --menu-width: 17.5rem;         /* 280px cascade columns */
  --radius-menu: 20px;
  --headshot-size: 240px;
  --icon-size: 40px;             /* category line icons */
  --icon-stroke: 1.5;

  /* ---- Interaction ----------------------------------------------------- */
  --tap-target: 2.75rem;         /* 44px minimum hit area */
  --transition: 150ms ease;
  --highlight-height: 45%;       /* share of the line the marker covers */
  --motion-sweep: 0.8s;          /* highlight sweep */
  --motion-fade: 0.6s;           /* section fade-up */
  --motion-rise: 16px;
  --motion-lift: 200ms;          /* card hover lift */
  --motion-header: 200ms;        /* header compaction */
  --motion-reveal: 250ms;        /* category card page list */
  --motion-menu: 150ms;          /* cascade columns fade and slide in */
  --menu-slide: 6px;
  --card-lift: -4px;
  --motion-draw: 0.9s;           /* heading line drawing in */
  --rule-width: 4.5rem;          /* heading line length */
  --check-size: 0.6em;           /* checklist marks on specialty pages */
}

/* ---- Phones (below 640px): tighter type and spacing ------------------- */
@media (max-width: 39.99em) {
  :root {
    --font-size-h1: 2.5rem;      /* 40px */
    --font-size-h2: 2rem;        /* 32px */
    --section-pad: 2.4rem;       /* 40% less than --space-8 */
    --header-offset: 7.5rem;     /* two-row header on phones */
  }
}