/* ============================================================
   tokens-stripe.css — PCW-24 Future Literacy · AMEE 2026 Vienna
   Origem: templates/ferramentas/design-md/stripe/DESIGN.md
   Contexto: projection (slides 1471x956), edição editorial densa
   Adaptações: sohne-var -> Inter c/ feature cv11+ss01 (fallback Google),
               SourceCodePro -> JetBrains Mono, pesos elevados em 1 nível
               (300 só em hero >= 80px) p/ legibilidade em projeção
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --primary: #533afd;
  --primary-hover: #4434d4;
  --primary-deep: #2e2b8c;
  --brand-dark: #1c1e54;

  /* Ink */
  --ink: #061b31;
  --label: #273951;
  --body: #64748d;
  --muted: #8a9bb0;

  /* Surfaces */
  --canvas: #ffffff;
  --alt: #f6f9fc;
  --dark: #1c1e54;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255,255,255,0.7);
  --on-dark-muted: rgba(255,255,255,0.5);

  /* Borders */
  --hairline: #e5edf5;
  --hairline-soft: #f0f4f9;
  --hairline-purple: #b9b9f9;
  --hairline-dashed: #362baa;

  /* Accents (semantic) */
  --ruby: #ea2261;
  --magenta: #f96bee;
  --magenta-soft: #ffd7ef;
  --success: #15be53;
  --success-deep: #108c3d;
  --success-soft: rgba(21,190,83,0.2);
  --lemon: #9b6829;
  --sky: #2874ad;

  /* Shadows (blue-tinted) */
  --shadow-amb: rgba(23,23,23,0.06) 0px 3px 6px;
  --shadow-std: rgba(23,23,23,0.08) 0px 15px 35px 0px;
  --shadow-elev: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px;
  --shadow-deep: rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px;

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;

  /* Radius */
  --r-1: 4px; --r-2: 6px; --r-3: 8px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #1a1a1a;
  color: var(--ink);
}

/* Slide canvas (1471x956 MacBook resolution) */
.slide {
  width: 1471px;
  height: 956px;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
.slide--dark { background: var(--brand-dark); color: var(--on-dark); }
.slide--alt { background: var(--alt); }

/* Layout utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Spacing */
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); } .mt-16 { margin-top: var(--s-16); } .mt-24 { margin-top: var(--s-24); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.mb-12 { margin-bottom: var(--s-12); } .mb-16 { margin-bottom: var(--s-16); }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }
.gap-12 { gap: var(--s-12); } .gap-16 { gap: var(--s-16); }
.px-12 { padding-left: var(--s-12); padding-right: var(--s-12); }
.px-16 { padding-left: var(--s-16); padding-right: var(--s-16); }
.px-24 { padding-left: var(--s-24); padding-right: var(--s-24); }
.py-12 { padding-top: var(--s-12); padding-bottom: var(--s-12); }
.py-16 { padding-top: var(--s-16); padding-bottom: var(--s-16); }
.py-24 { padding-top: var(--s-24); padding-bottom: var(--s-24); }
.p-6 { padding: var(--s-6); } .p-8 { padding: var(--s-8); } .p-12 { padding: var(--s-12); }

/* Typography */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.font-display, .font-body { font-family: 'Inter', sans-serif; font-feature-settings: 'ss01','cv11'; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text sizes (calibrated for projection 1471x956) */
.text-xs { font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; }
.text-sm { font-size: 15px; line-height: 1.45; }
.text-base { font-size: 18px; line-height: 1.5; }
.text-lg { font-size: 22px; line-height: 1.45; letter-spacing: -0.01em; }
.text-xl { font-size: 28px; line-height: 1.35; letter-spacing: -0.015em; }
.text-2xl { font-size: 36px; line-height: 1.25; letter-spacing: -0.02em; }
.text-3xl { font-size: 56px; line-height: 1.1; letter-spacing: -0.025em; }
.text-4xl { font-size: 80px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 400; }
.text-5xl { font-size: 112px; line-height: 1.0; letter-spacing: -0.04em; font-weight: 300; }
.text-data { font-size: 200px; line-height: 0.95; letter-spacing: -0.05em; font-weight: 300; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

.tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: 0.12em; }

/* Colors */
.text-ink { color: var(--ink); }
.text-body { color: var(--body); }
.text-label { color: var(--label); }
.text-muted { color: var(--muted); }
.text-accent { color: var(--primary); }
.text-ruby { color: var(--ruby); }
.text-success { color: var(--success-deep); }
.text-on-dark { color: var(--on-dark); }
.text-on-dark-soft { color: var(--on-dark-soft); }
.bg-surface { background: var(--canvas); }
.bg-alt { background: var(--alt); }
.bg-dark { background: var(--brand-dark); color: var(--on-dark); }
.bg-accent-soft { background: rgba(83,58,253,0.06); }

/* Max widths */
.max-w-tight { max-width: 32ch; }
.max-w-narrow { max-width: 42ch; }
.max-w-prose { max-width: 64ch; }
.max-w-wide { max-width: 90ch; }
.max-w-full { max-width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Component: card (Stripe hairline + blue-tinted shadow) */
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: var(--s-8);
  box-shadow: var(--shadow-std);
}
.card--elev { box-shadow: var(--shadow-elev); }
.card--ghost { background: var(--alt); border: 1px solid var(--hairline-soft); box-shadow: none; }
.card--dark { background: var(--brand-dark); color: var(--on-dark); border-color: rgba(255,255,255,0.1); }

/* Eyebrow */
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
}

/* Highlighted phrase (ruby underline) */
.hl-ruby {
  background: linear-gradient(180deg, transparent 62%, rgba(234,34,97,0.22) 62%, rgba(234,34,97,0.22) 92%, transparent 92%);
  padding: 0 0.05em;
}
.hl-purple {
  background: linear-gradient(180deg, transparent 62%, rgba(83,58,253,0.18) 62%, rgba(83,58,253,0.18) 92%, transparent 92%);
}

/* Pill / badge */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--alt);
  color: var(--label);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 500;
}
.pill--purple { background: rgba(83,58,253,0.08); border-color: rgba(83,58,253,0.18); color: var(--primary); }

/* Hairline rule */
.rule { height: 1px; background: var(--hairline); border: 0; }
.rule--dark { background: rgba(255,255,255,0.12); }

/* Footer-band positioning */
.slide-header {
  position: absolute; top: 48px; left: 96px; right: 96px;
  display: flex; justify-content: space-between; align-items: center;
}
.slide-footer {
  position: absolute; bottom: 48px; left: 96px; right: 96px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.brand-mark::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}