/* ============================================================
   Perelel Design System — Color & Type Tokens
   Brand: Perelel (OB/GYN-founded women's health)
   Ethos: Quiet Authority. Classical, architectural, geometric.
   ============================================================ */

/* ---------- Web fonts (loaded from /fonts) ---------- */

@font-face {
  font-family: "Tobias";
  src: url("./fonts/Tobias-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("./fonts/Tobias-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("./fonts/Tobias-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("./fonts/Tobias-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("./fonts/Tobias-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("./fonts/Tobias-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Haffer";
  src: url("./fonts/Haffer-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Haffer";
  src: url("./fonts/Haffer-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Haffer";
  src: url("./fonts/Haffer-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Haffer";
  src: url("./fonts/Haffer-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Haffer";
  src: url("./fonts/Haffer-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* PP Neue Montreal Mono — the clinical mono. Replaced Decima Mono May 2026
   following the mono-explorer evaluation. Medium (500) is the default weight;
   Book (400) is retained for italic variants and the few legacy specimens that
   call for a lighter mark. */
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("./fonts/PP Neue Montreal/PPNeueMontrealMono-Thin.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("./fonts/PP Neue Montreal/PPNeueMontrealMono-Book.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("./fonts/PP Neue Montreal/PPNeueMontrealMono-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("./fonts/PP Neue Montreal/PPNeueMontrealMono-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("./fonts/PP Neue Montreal/PPNeueMontrealMono-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("./fonts/PP Neue Montreal/PPNeueMontrealMono-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Hand-rendered display faces used in community/UGC, editorial accents,
   and the doctor's note signature. Kept off the system tokens because
   each carries its own voice — reach for them deliberately, not as a default. */
@font-face {
  font-family: "La Frenchie";
  src: url("./fonts/LaFrenchie-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "La Frenchie";
  src: url("./fonts/LaFrenchie-Alt.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Mark My Words";
  src: url("./fonts/MarkMyWords-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mark My Words";
  src: url("./fonts/MarkMyWords-Oblique.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "The Secret Things";
  src: url("./fonts/TheSecretThings.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Miss Confidential";
  src: url("./fonts/MissConfidential-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Saans — the Good Plans brand typeface. Used in the
   "Built by Good Plans™" attribution in every footer. */
@font-face {
  font-family: "Saans";
  src: url("./fonts/saans/Saans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ============================================================
   :root — Tokens
   ============================================================ */
:root {
  /* ----- Color: Base / Foundation ----- */
  --p-cream:        #F2EDE4;  /* System foundation. Neutral packaging. */
  --p-linen:        #E3DDCC;  /* Warm taupe. Secondary neutral. */
  --p-charcoal:     #2A2820;  /* All type. Logotype. Warm-toned. */
  --p-moody-plum:   #4F4050;  /* Secondary dark bg, paired w/ lilac. */

  /* ----- Hero life-stage colors ----- */
  --p-bleached-lilac: #FBEDF7; /* 1st Trimester. Lightest in system. */
  --p-mid-lilac:      #E3CBE3; /* 2nd Trimester. */
  --p-moody-lilac:    #9C8DB5; /* 3rd Trimester. Deepest lilac. */
  --p-melon:          #FF8080; /* Postpartum / Mom Multi / Women's Daily. */

  /* ----- Yellow Scale (TTC/Conception/Recovery/Egg Freeze) ----- */
  --p-parchment:    #F5F0D8;  /* Background tint, hover. */
  --p-buttercup:    #F3E58A;  /* Mid fill, cards, badges. */
  --p-warm-straw:   #E8DB84;  /* Hero fill, life-stage primary. */

  /* ----- Coral Scale (Mom Multi / Women's Daily / Postpartum) ----- */
  --p-petal:        #FFCECA;  /* Lightest coral. */
  /* mid fill: --p-melon  #FF8080  (shared with Hero) */
  --p-clay:         #EE857D;  /* Deeper fill, accent. */

  /* ----- Lilac Scale (mirrors Hero, formalized) ----- */
  /* light:  --p-bleached-lilac
     mid:    --p-mid-lilac
     deep:   --p-moody-lilac  */

  /* ----- Highlight / Digital Pop (digital-only — handle with restraint) -----
     The most saturated values in the system. Screen-optimized "pop" colors,
     one per life-stage family, for digital surfaces that need to perform:
     accents on dark backgrounds, active states, data-viz emphasis, badge dots.
     NEVER on product/packaging, large fields, print, body, CTAs, or wayfinding.
     "Pop" is the deck shorthand. Used sparingly they carry weight; used broadly
     they undo Quiet Authority. */
  --p-highlight-lilac:  #E6A6E6;  /* Pregnancy pop.        Charcoal type. */
  --p-highlight-coral:  #FF5C7A;  /* Motherhood pop.       Cream type.    */
  --p-highlight-yellow: #F5D000;  /* TTC pop.              Charcoal type. */
  --p-highlight-sage:   #6FEDBF;  /* General Wellness pop. Charcoal type. */

  /* ----- Sage (e-comm chrome wayfinding — locked) ----- */
  --p-sage-light:   #E7EDE9;  /* Top nav background on e-comm. */
  --p-sage-deep:    #BAC9BF;  /* Footer background on e-comm. */

  /* ----- Extension / Flavor Cues ----- */
  --p-powder:       #C8DEE5;  /* Pea powder. Vanilla-flavored protein accent. */
  --p-peach:        #FFBBA5;  /* Flavor-specific cue. */
  --p-snow:         #EFF2F3;  /* Subtle clinical backgrounds. */

  /* ----- Clinical / utility neutrals ----- */
  --p-bone:         #FCFAF8;  /* Page tint. */
  --p-ivory:        #F7F4EF;  /* Frame tint. */
  --p-rule:         #D8D4CE;  /* Hairline divider. */
  --p-stone:        #8A8780;  /* Eyebrow / metadata text. */
  --p-shale:        #6A6660;  /* Body secondary. */
  --p-deep-green:   #172522;  /* Clinical card type (used in PDP). */

  /* ----- Semantic foreground ----- */
  --fg-1:           var(--p-charcoal);   /* primary type */
  --fg-2:           var(--p-shale);      /* body secondary */
  --fg-3:           var(--p-stone);      /* eyebrow / meta */
  --fg-clinical:    var(--p-deep-green); /* deep-green editorial */
  --fg-on-dark:     var(--p-cream);

  /* ----- Semantic background ----- */
  --bg-page:        var(--p-bone);
  --bg-surface:     var(--p-cream);
  --bg-tint:        var(--p-ivory);
  --bg-clinical:    var(--p-snow);

  /* ----- Borders ----- */
  --border-hairline: 0.5px solid var(--p-rule);
  --border-thin:     1px solid var(--p-rule);
  --border-ink:      1px solid var(--p-charcoal);

  /* ----- Spacing scale (8pt rooted, with editorial 12-base for type) ----- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* ----- Radii (mostly square; subtle softening only) ----- */
  --r-0: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ----- Shadows (quiet; editorial paper) ----- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(42,40,32,0.06);
  --shadow-2: 0 1px 2px rgba(42,40,32,0.06), 0 8px 24px rgba(42,40,32,0.04);
  --shadow-3: 0 2px 4px rgba(42,40,32,0.08), 0 16px 40px rgba(42,40,32,0.06);

  /* ============================================================
     Type Families
     ============================================================ */
  --font-serif:    "Tobias", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans:     "Haffer", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "PP Neue Montreal Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type tokens (semantic) ----- */
  --type-display:    300 clamp(56px, 9vw, 176px)/0.9 var(--font-serif);
  --type-h1:         300 clamp(40px, 5vw, 72px)/0.95 var(--font-serif);
  --type-h2:         300 40px/1.05 var(--font-serif);
  --type-h3:         300 28px/1.15 var(--font-serif);
  --type-editorial-italic: 300 italic clamp(40px, 5vw, 72px)/1.0 var(--font-serif);

  --type-title:      400 42px/1.05 var(--font-sans);  /* PDP product title */
  --type-sub-header: 500 20px/1.3  var(--font-sans);  /* Pill value-props accordion h2 */
  --type-body:       400 16px/1.55 var(--font-sans);
  --type-small:      400 14px/1.55 var(--font-sans);
  --type-caption:    400 12px/1.4  var(--font-sans);

  --type-eyebrow:    500 11px/1.0  var(--font-mono);   /* tracked clinical eyebrow — Neue Montreal Medium */
  --type-eyebrow-tracking: 0.18em;
  --type-mono:       500 13px/1.35 var(--font-mono);   /* metadata, code, stamps — Neue Montreal Medium */
  --type-mono-sm:    500 11px/1.3  var(--font-mono);   /* compact metadata — Neue Montreal Medium */
  --type-label:      500 11px/1.0  var(--font-sans);
}

/* ============================================================
   Element baselines
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-h1); letter-spacing: -0.02em; margin: 0 0 var(--s-5); }
h2 { font: var(--type-h2); letter-spacing: -0.015em; margin: 0 0 var(--s-4); }
h3 { font: var(--type-h3); letter-spacing: -0.01em; margin: 0 0 var(--s-3); }
p  { font: var(--type-body); margin: 0 0 var(--s-3); color: var(--fg-1); }
small { font: var(--type-caption); color: var(--fg-2); }
code, kbd, samp { font: var(--type-mono); }

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-3);
}
.editorial { font: var(--type-editorial-italic); font-style: italic; }
.serif    { font-family: var(--font-serif); }
.sans     { font-family: var(--font-sans); }
.mono     { font-family: var(--font-mono); }