/* ──────────────────────────────────────────────────────────────
   Eraborn — Colors & Type
   Source: /LOBBY/BrandBook (Brand4 = palette, Typeface = type)
   ────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Libre+Caslon+Text:wght@400;700&display=swap");

/* Chillax is not on Google Fonts. Substituting "Fraunces" /
   "DM Serif Display" is wrong (very different feel). We instead use
   Chillax via Fontshare (free, the original source for Chillax). */
@import url("https://api.fontshare.com/v2/css?f[]=chillax@400,500,600,700&display=swap");

:root {
  /* ─────────── Brand palette (from Brand4) ─────────── */

  /* Purple / lilac — primary brand hue */
  --era-purple-20: #DEDFFF;
  --era-purple-40: #BDBEFF;
  --era-purple-60: #7E80FF;   /* PRIMARY brand purple */
  --era-purple-80: #5E60BF;
  --era-purple-100: #202166;

  /* Pink — secondary accent (highlights, tags) */
  --era-pink-20: #FFD3F4;
  --era-pink-40: #FFA8E9;
  --era-pink-60: #E45BC2;
  --era-pink-80: #A24189;
  --era-pink-100: #71205D;

  /* Yellow — informational accent */
  --era-yellow-20: #FFF2BF;
  --era-yellow-40: #FFE67F;
  --era-yellow-60: #FFCD00;
  --era-yellow-80: #D8AE05;
  --era-yellow-100: #AC9121;

  /* Orange — warm accent / illustration */
  --era-orange-20: #FFE0BA;
  --era-orange-40: #FFC176;
  --era-orange-60: #FF8C00;
  --era-orange-80: #D48019;
  --era-orange-100: #8D622D;

  /* Red — alerts, accent lines (also used for brand "live" energy) */
  --era-red: #FF404C;

  /* Neutrals */
  --era-black: #000000;
  --era-grey-main: #4D4D4D;
  --era-grey-light: #C1C1C1;
  --era-grey-lighter: #EBEBEB;
  --era-cream: #FDFBFA;        /* off-white background */
  --era-white: #FFFFFF;

  /* Cool / surface neutrals lifted from B2B screens */
  --era-surface-50: #F9F9F9;
  --era-border: #E2E8F0;
  --era-text-muted: #62748E;
  --era-text-deep: #0F172B;

  /* Semantic colors */
  --fg-1: var(--era-black);
  --fg-2: var(--era-grey-main);
  --fg-3: var(--era-text-muted);
  --fg-on-dark: var(--era-cream);

  --bg-1: var(--era-white);
  --bg-2: var(--era-cream);
  --bg-3: var(--era-surface-50);
  --bg-inverse: var(--era-black);

  --accent: var(--era-purple-60);
  --accent-soft: var(--era-purple-20);
  --accent-deep: var(--era-purple-100);

  --highlight: var(--era-pink-20);   /* the recurring pink "highlight bar" */
  --highlight-strong: var(--era-pink-60);

  --border: var(--era-grey-lighter);
  --border-strong: var(--era-grey-light);

  --danger: var(--era-red);
  --warning: var(--era-orange-60);
  --success: #277852;            /* lifted from BrandBook divider dot */

  /* ─────────── Type families ─────────── */
  --font-display: "Libre Caslon Text", "Spectral", Georgia, serif; /* editorial hero */
  --font-sans:    "Urbanist", "Inter", system-ui, sans-serif;   /* primary UI */
  --font-body:    "Inter", "Urbanist", system-ui, sans-serif;   /* paragraphs */
  --font-serif:   "Libre Caslon Text", "Spectral", Georgia, serif; /* editorial/decorative */
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ─────────── Type scale (from BrandBook + screens) ─────────── */
  --text-xs:   12px;   /* labels, micro */
  --text-sm:   14px;   /* secondary body */
  --text-base: 16px;   /* body */
  --text-md:   18px;   /* lede */
  --text-lg:   20px;   /* section eyebrow / sm h */
  --text-xl:   24px;   /* card title */
  --text-2xl:  28px;
  --text-3xl:  36px;   /* page heading */
  --text-4xl:  48px;   /* large heading */
  --text-display: 67px;/* "Fertility Copilot" hero */
  --text-mega: 100px;  /* Chillax marketing */

  /* Tracking */
  --track-eyebrow: 0.06em;
  --track-allcaps: 0.32em;   /* "eraborn.co" subhead */
  --track-tight: -0.02em;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  /* ─────────── Spacing & radii ─────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Shadow system (from screens + BrandBook cards) */
  --shadow-xs: 0 1px 2px rgba(19,19,20,0.04);
  --shadow-sm: 0 2px 4px rgba(19,19,20,0.04);
  --shadow-md: 0 8px 16px rgba(19,19,20,0.10), 0 2px 4px rgba(19,19,20,0.04);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.18);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
}

/* ─────────── Semantic typography ─────────── */
.era-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.era-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.era-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.era-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-mega);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.era-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-2);
  text-transform: none; /* brand uses sentence + tracked, not uppercase */
}
.era-allcaps {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: var(--track-allcaps);
  color: var(--fg-2);
}
.era-p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.era-p-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.era-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}