/* =========================================================================
   pagebird — design tokens
   Single source of truth for colors, type, spacing, radius, shadows.
   Pulled directly from the brand kit and product code.
   ========================================================================= */

/* —— Brand fonts (self-hosted) ———————————————————————————— */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-300Italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-400Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-500Italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-600Italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Nunito is used in the product but not in the brand kit — keep Google as fallback */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap");

:root {
  /* —— Forest greens (primary) ———————————————————————————— */
  --pb-green:        #1F3D31;   /* primary forest */
  --pb-green-deep:   #163026;   /* darker variant — backgrounds */
  --pb-green-darker: #0F231B;   /* deepest — type on cream, edges */
  --pb-green-light:  #2D6A58;   /* lifted — gradient stops, hovers */

  /* —— Cream & paper (neutral) ——————————————————————————— */
  --pb-cream:        #F4EBDC;   /* primary cream surface */
  --pb-cream-2:      #EFE3CF;   /* slightly cooler — alt panels */
  --pb-paper:        #FBF6EC;   /* warm white — sheets, cards on cream */
  --pb-bg:           #FAF1E8;   /* canvas background — softer than cream */
  --pb-pink:         #F5DCD0;   /* blush — chips, highlights */
  --pb-pink-deep:    #E8C4B4;   /* deeper blush */

  /* —— Gold (mascot + linework) —————————————————————————— */
  --pb-gold:         #F2C14E;   /* mascot fill, primary gold */
  --pb-gold-line:    #C8A24A;   /* line drawings, deeper gold */
  --pb-gold-light:   #E9C77A;   /* highlights */

  /* —— Coral (accent) —————————————————————————————————— */
  --pb-coral:        #E8856B;   /* accent, bookmark, links */
  --pb-coral-soft:   #F2C2A9;   /* soft coral — chips */

  /* —— Ink (type) ——————————————————————————————————— */
  --pb-ink:          #2A2422;   /* primary text on cream */
  --pb-ink-soft:     #3B362B;   /* secondary text */
  --pb-ink-muted:    #7a6f6a;   /* tertiary, captions */

  /* —— Lines & rules ————————————————————————————————— */
  --pb-rule:         rgba(31, 61, 49, 0.22);
  --pb-rule-on-dark: rgba(244, 235, 220, 0.22);
  --pb-border:       #E8D4C8;

  /* —— Type ——————————————————————————————————————— */
  --pb-font-display: "Fraunces", Georgia, serif;
  --pb-font-ui:      "Nunito", system-ui, sans-serif;
  --pb-font-mono:    "JetBrains Mono", "Courier New", monospace;
  --pb-font-meta:    "Inter", system-ui, sans-serif;  /* eyebrows, all-caps meta */

  /* —— Radius ————————————————————————————————————— */
  --pb-radius-sm: 8px;
  --pb-radius-md: 12px;
  --pb-radius-lg: 20px;
  --pb-radius-xl: 28px;
  --pb-radius-pill: 999px;

  /* —— Shadows ————————————————————————————————————— */
  --pb-shadow-sm:  0 2px 8px  rgba(15, 35, 27, 0.08);
  --pb-shadow-md:  0 8px 24px rgba(15, 35, 27, 0.12);
  --pb-shadow-lg:  0 24px 60px rgba(15, 35, 27, 0.18);
  --pb-shadow-phone: 0 36px 80px rgba(15, 42, 35, 0.45),
                     0 14px 28px rgba(0, 0, 0, 0.25);

  /* —— Spacing scale (8pt, with 4 micro-step) ———————————————— */
  --pb-space-1: 4px;
  --pb-space-2: 8px;
  --pb-space-3: 12px;
  --pb-space-4: 16px;
  --pb-space-5: 24px;
  --pb-space-6: 32px;
  --pb-space-7: 48px;
  --pb-space-8: 64px;
  --pb-space-9: 96px;
  --pb-space-10: 128px;
}

/* =========================================================================
   Base reset for spec pages
   ========================================================================= */
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
body {
  font-family: var(--pb-font-ui);
  background: var(--pb-bg);
  color: var(--pb-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font-family: inherit; }
a { color: var(--pb-coral); }

/* =========================================================================
   Typography classes — match deck.css and brand.jsx usage
   ========================================================================= */
.pb-display {
  font-family: var(--pb-font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
}
.pb-display-italic {
  font-family: var(--pb-font-display);
  font-style: italic;
  font-weight: 400;
}
.pb-serif {
  font-family: var(--pb-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.pb-eyebrow {
  font-family: var(--pb-font-meta);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--pb-green);
}
.pb-eyebrow .num {
  color: var(--pb-coral);
  margin-right: 14px;
  font-weight: 600;
}
.pb-body {
  font-family: var(--pb-font-display);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--pb-ink-soft);
}
.pb-ui {
  font-family: var(--pb-font-ui);
}
.pb-mono {
  font-family: var(--pb-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* =========================================================================
   Spec page layout primitives (used by the design system pages)
   ========================================================================= */
.spec-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 48px 128px;
}
.spec-h1 {
  font-family: var(--pb-font-display);
  font-size: 72px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 8px;
}
.spec-h1 em {
  font-style: italic;
  color: var(--pb-coral);
}
.spec-lede {
  font-family: var(--pb-font-display);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.4;
  color: var(--pb-ink-soft);
  max-width: 720px;
  margin: 0 0 64px;
}
.spec-h2 {
  font-family: var(--pb-font-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 64px 0 8px;
}
.spec-h2-eyebrow {
  font-family: var(--pb-font-meta);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pb-coral);
  font-weight: 600;
  margin-top: 64px;
}
.spec-h3 {
  font-family: var(--pb-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pb-green);
  margin: 32px 0 16px;
}
.spec-p {
  font-family: var(--pb-font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pb-ink-soft);
  max-width: 64ch;
  margin: 0 0 12px;
}
.spec-divider {
  height: 1px;
  background: var(--pb-rule);
  border: 0;
  margin: 80px 0;
}
.spec-grid {
  display: grid;
  gap: 24px;
}
.spec-card {
  background: var(--pb-paper);
  border: 1px solid var(--pb-rule);
  border-radius: var(--pb-radius-lg);
  padding: 24px;
}
.spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--pb-radius-pill);
  font-family: var(--pb-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pb-cream-2);
  color: var(--pb-green);
}