/* =========================================================
   PedagogyVentures Design System — "Paper & Origami"
   Tokens + semantic type classes.
   This file is the single source of truth for design tokens.
   components.css @imports this file; do not duplicate the :root block.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Archivo:wght@400;500;600;700&family=Caveat:wght@500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */

  /* PV Blue — primary CTA accent (from the logo plane), footer, italic accent */
  --pv-blue-900: #2e3d7d;
  --pv-blue-700: #3749a0;
  --pv-blue:     #4256ac;
  --pv-blue-200: #b8c2e6;
  --pv-blue-100: #e2e7f4;

  /* Pedagogy Green — secondary editorial accent: eyebrows, stamps, flight paths */
  --pv-green-700: #2a504b;
  --pv-green:     #3d7068;
  --pv-green-400: #6d9892;
  --pv-green-100: #dbe7e4;
  --pv-green-50:  #eff4f3;

  /* Paper tones — the page + artifact surfaces */
  --paper:        #fdfbf4;   /* warm cream, the page */
  --paper-2:      #f7f3e8;   /* darker cream, alt sections */
  --paper-kraft:  #ede4d2;   /* kraft tint, strip backgrounds */
  --cream:        #fdfcf8;   /* off-white for cards, testimonials */
  --white:        #ffffff;

  /* Artifact tones (paper ephemera: passports, flight maps, rosters) */
  --artifact-ink: #2a3b3a;   /* dark green-slate on paper artifacts */
  --kraft-border: #d7c9a8;

  /* Text */
  --ink:    #0e1226;
  --ink-2:  #2a2e4a;
  --slate:  #5a5f7a;
  --muted:  #8a8fa3;

  /* Hairlines */
  --rule:     rgba(14,18,38,.10);
  --rule-ink: rgba(14,18,38,.18);

  /* Foreground aliases */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--slate);

  /* Accent role: PV blue is the primary CTA accent (follows the logo);
     green is the secondary editorial accent (eyebrows, stamps, flight paths). */
  --accent: var(--pv-blue);
  --accent-hover: var(--pv-blue-700);

  /* ---------- TYPE ---------- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-hand:    'Caveat', 'Brush Script MT', cursive;
  --font-mono:    'JetBrains Mono', Menlo, monospace;

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- RADIUS ---------- */
  /* Paper surfaces are nearly square. 2–4px only. */
  --r-1: 4px;
  --r-2: 6px;

  /* ---------- SHADOWS ---------- */
  --shadow-paper: 0 1px 0 rgba(14,18,38,.04), 0 2px 4px rgba(14,18,38,.05), 0 12px 28px rgba(14,18,38,.07);
  --shadow-card:  0 2px 0 rgba(14,18,38,.04), 0 14px 28px rgba(14,18,38,.06);
  --shadow-lift:  0 2px 0 rgba(14,18,38,.05), 0 18px 36px rgba(14,18,38,.10), 0 32px 60px rgba(14,18,38,.06);

  /* ---------- MOTION ---------- */
  --ease:        cubic-bezier(.2,.6,.2,1);
  --ease-glide:  cubic-bezier(.25,.46,.45,.94);
  --dur:         260ms;

  /* ---------- LAYOUT ---------- */
  --container: 1240px;
  --gutter: 32px;
  --nav-h: 76px;
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- PAPER TEXTURE ----------
   Subtle fiber flecks + a warm wash. Applied to body by default.
   Use .paper-texture-subtle for alternating sections. */
.paper-texture,
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(61,112,104,0.035) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(61,112,104,0.03)  0 1px, transparent 2px),
    radial-gradient(circle at 45% 80%, rgba(14,18,38,0.025)   0 1px, transparent 2px),
    linear-gradient(180deg, #fdfbf4 0%, #f9f5e9 100%);
  background-size: 180px 180px, 240px 240px, 300px 300px, 100% 100%;
  background-attachment: fixed;
}
.paper-texture-subtle {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(14,18,38,0.02)  0 1px, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(61,112,104,0.025) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--cream) 0%, #f7f3e8 100%);
  background-size: 200px 200px, 260px 260px, 100% 100%;
}

/* ---------- SEMANTIC TYPE ---------- */
.pv-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 7vw, 104px);
  line-height: .98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 32px;
}
.pv-display em { font-style: italic; font-weight: 500; color: var(--pv-blue); }

.pv-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 20px;
}
.pv-h1 em { font-style: italic; color: var(--pv-blue); }

.pv-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
}
.pv-h2 em { font-style: italic; color: var(--pv-blue); }

.pv-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
}

.pv-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  max-width: 56ch;
}

.pv-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-green);
}

.pv-body    { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.pv-body-sm { font-size: 14px; line-height: 1.55; color: var(--slate); }

.eyebrow-row {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.eyebrow-row.center { justify-content: center; }
.eyebrow-row .dash {
  width: 40px; height: 1.5px;
  background: var(--pv-blue); opacity: 0.7;
}

/* Hand-written accent (Caveat) — for signoffs, margin asides */
.hand {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 22px;
  color: var(--pv-green);
  line-height: 1;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}