/* ============================================================
   tokens-anthropic.css — PCW-24 Future Literacy · AMEE 2026 Vienna
   Origem: templates/ferramentas/design-md/claude/DESIGN.md
   Contexto: projection (slides 1471x956), warm editorial sober
   Adaptações: Copernicus -> Cormorant Garamond (Google Fonts close match),
               StyreneB -> Inter, JetBrains Mono mantido,
               coral primary preservado, paleta tratada como sistema editorial
               neutro (sem nenhum sinal Claude/Anthropic brand marks).
   ============================================================ */

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

:root {
  /* Brand */
  --primary: #cc785c;
  --primary-active: #a9583e;
  --primary-soft: rgba(204,120,92,0.12);
  --accent-teal: #5db8a6;
  --accent-amber: #e8a55a;

  /* Ink */
  --ink: #141413;
  --body: #3d3d3a;
  --body-strong: #252523;
  --muted: #6c6a64;
  --muted-soft: #8e8b82;

  /* Surfaces — warm cream system */
  --canvas: #faf9f5;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --surface-cream-strong: #e8e0d2;
  --surface-dark: #181715;
  --surface-dark-elevated: #252320;
  --surface-dark-soft: #1f1e1b;

  /* Borders */
  --hairline: #e6dfd8;
  --hairline-soft: #ebe6df;

  /* Text on dark */
  --on-primary: #ffffff;
  --on-dark: #faf9f5;
  --on-dark-soft: #a09d96;

  /* Semantic */
  --success: #5db872;
  --warning: #d4a017;
  --error: #c64545;

  /* 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-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
}

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

.slide {
  width: 1471px;
  height: 956px;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
.slide--dark { background: var(--surface-dark); color: var(--on-dark); }
.slide--alt { background: var(--surface-soft); }
.slide--card { background: var(--surface-card); }

/* Layout */
.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 — Cormorant Garamond serif display + Inter body + JBM code */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0; }
.font-display, .font-serif { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; }
.font-body, .font-sans { font-family: 'Inter', -apple-system, sans-serif; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text sizes — calibrated projection */
.text-xs { font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; }
.text-sm { font-size: 15px; line-height: 1.55; }
.text-base { font-size: 18px; line-height: 1.55; }
.text-lg { font-size: 22px; line-height: 1.4; }
.text-xl { font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; }
.text-2xl { font-size: 40px; line-height: 1.15; letter-spacing: -0.015em; }
.text-3xl { font-size: 56px; line-height: 1.1; letter-spacing: -0.025em; }
.text-4xl { font-size: 76px; line-height: 1.05; letter-spacing: -0.03em; }
.text-5xl { font-size: 104px; line-height: 1.02; letter-spacing: -0.035em; }
.text-data { font-size: 220px; line-height: 0.95; letter-spacing: -0.04em; font-weight: 500; }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.italic { font-style: italic; }
.tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }

/* Colors */
.text-ink { color: var(--ink); }
.text-body { color: var(--body); }
.text-label { color: var(--body-strong); }
.text-muted { color: var(--muted); }
.text-muted-soft { color: var(--muted-soft); }
.text-accent { color: var(--primary); }
.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(--surface-soft); }
.bg-card { background: var(--surface-card); }
.bg-dark { background: var(--surface-dark); color: var(--on-dark); }
.bg-coral { background: var(--primary); color: var(--on-primary); }
.bg-accent-soft { background: var(--primary-soft); }

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

/* Card — cream surface, no shadow */
.card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: var(--s-8);
}
.card--canvas {
  background: var(--canvas);
  border: 1px solid var(--hairline);
}
.card--dark {
  background: var(--surface-dark);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: var(--s-8);
}
.card--coral {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-lg);
  padding: var(--s-12);
}

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

/* Spike-mark substitute — single asterisk glyph rendered as a 4-spoke radial */
.spike {
  display: inline-block;
  width: 18px; height: 18px;
  position: relative;
}
.spike::before, .spike::after {
  content: ''; position: absolute; background: currentColor;
}
.spike::before { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.spike::after { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }

/* Pill / badge */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface-card);
  color: var(--ink);
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: 13px; font-weight: 500;
}
.badge--coral { background: var(--primary); color: var(--on-primary); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; }

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

.slide-header {
  position: absolute; top: 48px; left: 64px; right: 64px;
  display: flex; justify-content: space-between; align-items: center;
}
.slide-footer {
  position: absolute; bottom: 48px; left: 64px; right: 64px;
  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);
}

/* Italic editorial quote with hanging serif quotes */
.editorial-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  position: relative;
}
.editorial-quote::before {
  content: '\201C'; /* opening curly quote */
  position: absolute;
  left: -0.5em; top: -0.2em;
  font-size: 1.2em; color: var(--primary);
  font-style: normal;
  line-height: 1;
}