/* ==========================================================================
   Purple Group — Colors & Type
   Foundations for every Purple Group artifact. Import this file first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

/* Production: only the weights this page actually uses are shipped.
   Greycliff Light (300) and Regular (400) were dropped — see plan U2 / D4.
   Files are woff2 subsets covering Basic Latin + Latin Extended A/B +
   General Punctuation + Currency Symbols. */
@font-face {
  font-family: "Greycliff CF";
  src: url("./fonts/Greycliff-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Greycliff CF";
  src: url("./fonts/Greycliff-DemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
/* Castoro — REGULAR only, NORMAL case only. There is no italic Castoro in
   this system and the brand does not use ALL CAPS Castoro. Castoro is for
   pull-quotes and editorial moments in sentence case. */
@font-face {
  font-family: "Castoro";
  src: url("./fonts/Castoro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (from brand.md + Figma usage counts) */
  --pg-cloudy-white:   #F5FDFF;  /* primary light background */
  --pg-frosted-blue:   #A6E1FA;  /* light accent */
  --pg-tropical-indigo:#918EF4;  /* mid accent, section BG */
  --pg-blue-violet:    #7C3AED;  /* PRIMARY brand, CTAs, chapter badges */
  --pg-dark-teal:      #053A4D;  /* dark accent, chapter rules on light */
  --pg-ink-black:      #021B2A;  /* primary dark background, body text */
  --pg-white:          #FFFFFF;
  --pg-black:          #000000;

  /* Supporting accents (from Figma) */
  --pg-amber:          #E39F56;  /* chart accent only */
  --pg-crimson:        #CC2936;  /* chart/error accent */
  --pg-mint:           #56E39F;  /* chart accent */

  /* Semantic — surfaces */
  --pg-bg:             var(--pg-cloudy-white);
  --pg-bg-dark:        var(--pg-ink-black);
  --pg-bg-accent:      var(--pg-tropical-indigo);
  --pg-bg-brand:       var(--pg-blue-violet);

  /* Semantic — foreground */
  --pg-fg:             var(--pg-ink-black);
  --pg-fg-muted:       color-mix(in srgb, var(--pg-ink-black) 80%, transparent);
  --pg-fg-subtle:      color-mix(in srgb, var(--pg-ink-black) 60%, transparent);
  --pg-fg-inverse:     var(--pg-white);
  --pg-fg-inverse-muted: color-mix(in srgb, var(--pg-white) 80%, transparent);
  --pg-fg-brand:       var(--pg-blue-violet);

  /* Semantic — lines */
  --pg-line-dark:      var(--pg-dark-teal);
  --pg-line-light:     var(--pg-white);

  /* Type stack */
  --pg-font-sans: "Greycliff CF", "Avenir Next", "Avenir", ui-sans-serif, system-ui, sans-serif;
  --pg-font-serif: "Castoro", "Rooney", Georgia, "Times New Roman", serif;

  /* Weights (Greycliff CF axis) */
  --pg-weight-light: 300;
  --pg-weight-regular: 400;
  --pg-weight-medium: 500;   /* display weight */
  --pg-weight-demibold: 700; /* eyebrow/chapter labels */

  /* Type — DISPLAY (from Figma: 240, 200, 88, 48, 32) */
  --pg-size-display-xl: 240px; /* cover H1 */
  --pg-size-display-lg: 200px; /* section title */
  --pg-size-display-md: 88px;  /* slide title */
  --pg-size-display-sm: 48px;

  /* Type — TEXT */
  --pg-size-body-lg: 44px;     /* bullet body on dark */
  --pg-size-body:    30px;     /* default slide body */
  --pg-size-body-sm: 24px;
  --pg-size-caption: 20px;     /* eyebrow / chapter name */
  --pg-size-micro:   18px;

  /* Eyebrow label style — ALL CAPS letter-spacing */
  --pg-eyebrow-tracking: 0.18em;

  /* Line-heights */
  --pg-lh-display: 1;
  --pg-lh-title: 0.95;
  --pg-lh-body: 1.3;
  --pg-lh-body-loose: 1.45;
  --pg-lh-eyebrow: 1.2;

  /* Spacing scale (4-based) */
  --pg-space-0: 0;
  --pg-space-1: 4px;
  --pg-space-2: 8px;
  --pg-space-3: 12px;
  --pg-space-4: 16px;
  --pg-space-5: 20px;
  --pg-space-6: 24px;
  --pg-space-8: 32px;
  --pg-space-10: 40px;
  --pg-space-12: 50px;
  --pg-space-15: 60px;   /* slide edge padding */
  --pg-space-20: 80px;

  /* Radii */
  --pg-radius-sm: 4px;
  --pg-radius-md: 8px;
  --pg-radius-lg: 16px;     /* image cards on slides */
  --pg-radius-pill: 9999px; /* chapter badge + name capsule */

  /* Borders */
  --pg-border-hair: 1px;
  --pg-border-rule: 1.5px;

  /* Elevation (restrained — used in UI contexts only, not slides) */
  --pg-shadow-sm: 0 1px 2px rgba(2,27,42,0.08);
  --pg-shadow-md: 0 4px 12px rgba(2,27,42,0.08);
  --pg-shadow-lg: 0 12px 36px rgba(2,27,42,0.12);

  /* Motion — understated */
  --pg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pg-dur-fast: 120ms;
  --pg-dur: 220ms;
  --pg-dur-slow: 480ms;
}

/* --------------------------------------------------------------------------
   Element defaults
   -------------------------------------------------------------------------- */
body {
  font-family: var(--pg-font-sans);
  color: var(--pg-fg);
  background: var(--pg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display */
.pg-h1, h1.pg-display {
  font-family: var(--pg-font-sans);
  font-weight: var(--pg-weight-medium);
  font-size: var(--pg-size-display-xl);
  line-height: var(--pg-lh-display);
  letter-spacing: -0.01em;
}
.pg-h2 {
  font-family: var(--pg-font-sans);
  font-weight: var(--pg-weight-medium);
  font-size: var(--pg-size-display-lg);
  line-height: var(--pg-lh-display);
  letter-spacing: -0.01em;
}
.pg-h3 {
  font-family: var(--pg-font-sans);
  font-weight: var(--pg-weight-medium);
  font-size: var(--pg-size-display-md);
  line-height: var(--pg-lh-title);
}
.pg-h4 {
  font-family: var(--pg-font-sans);
  font-weight: var(--pg-weight-demibold);
  font-size: 32px;
  line-height: 1.05;
}

/* Body */
.pg-body-lg {
  font-family: var(--pg-font-sans);
  font-size: var(--pg-size-body-lg);
  line-height: var(--pg-lh-body-loose);
  color: var(--pg-fg-muted);
}
.pg-body {
  font-family: var(--pg-font-sans);
  font-size: var(--pg-size-body);
  line-height: var(--pg-lh-body);
  color: var(--pg-fg-muted);
}
.pg-caption {
  font-family: var(--pg-font-sans);
  font-size: var(--pg-size-body-sm);
  line-height: 1.3;
  color: var(--pg-fg-muted);
}

/* Eyebrow — ALL CAPS letter-spaced label (used in chapter capsules) */
.pg-eyebrow {
  font-family: var(--pg-font-sans);
  font-weight: var(--pg-weight-demibold);
  font-size: var(--pg-size-caption);
  letter-spacing: var(--pg-eyebrow-tracking);
  line-height: var(--pg-lh-eyebrow);
  text-transform: lowercase; /* used lowercase in deck — but the tracking evokes uppercase */
}

/* Tag — ALL CAPS Greycliff, letter-spaced. For small metadata labels, eyebrows
   above titles, categorical pills, etc. */
.pg-tag {
  font-family: var(--pg-font-sans);
  font-weight: var(--pg-weight-demibold);
  font-size: 14px;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.pg-tag-lg {
  font-family: var(--pg-font-sans);
  font-weight: var(--pg-weight-demibold);
  font-size: 18px;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.pg-tag-sm {
  font-family: var(--pg-font-sans);
  font-weight: var(--pg-weight-demibold);
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Serif quote — Castoro Regular, sentence case.
   Castoro is used for pull-quotes, editorial moments, and the occasional serif
   accent. Always REGULAR weight, always NORMAL case (sentence case), NEVER
   ALL CAPS, NEVER italic. If you want an ALL CAPS label, reach for Greycliff
   (.pg-tag / .pg-eyebrow) — that is the sans font's job. */
.pg-quote {
  font-family: var(--pg-font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-transform: none;
}