/* ============================================================
   tokens-ibm.css — PCW-24 Future Literacy · AMEE 2026 Vienna
   Origem: templates/ferramentas/design-md/ibm/DESIGN.md
   Contexto: projection (slides 1471x956), registro acadêmico-Carbon
   Adaptações: IBM Plex Sans + Plex Serif + Plex Mono (todos Google Fonts),
               pesos 300 só em display >= 60px, body 400 letter-spacing 0.16px
               (Carbon precision detail preservado), 0px radius em tudo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Serif:ital,wght@0,300;0,400;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --primary: #0f62fe;
  --primary-hover: #0050e6;
  --blue-60: #0043ce;
  --blue-80: #002d9c;

  /* Ink */
  --ink: #161616;
  --ink-muted: #525252;
  --ink-subtle: #8c8c8c;

  /* Surfaces */
  --canvas: #ffffff;
  --surface-1: #f4f4f4;
  --surface-2: #e0e0e0;
  --inverse-canvas: #161616;
  --inverse-surface-1: #262626;
  --inverse-ink: #ffffff;
  --inverse-ink-muted: #c6c6c6;

  /* Borders */
  --hairline: #e0e0e0;
  --hairline-strong: #161616;

  /* Semantic */
  --success: #24a148;
  --warning: #f1c21b;
  --error: #da1e28;

  /* 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 — Carbon flat */
  --r-none: 0;
  --r-sm: 2px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #1a1a1a;
  color: var(--ink);
  letter-spacing: 0.16px;
}

/* Slide canvas */
.slide {
  width: 1471px;
  height: 956px;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
.slide--dark { background: var(--inverse-canvas); color: var(--inverse-ink); }
.slide--alt { background: var(--surface-1); }

/* 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); }
.grid-16 { grid-template-columns: repeat(16, 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: 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0; }
.font-serif { font-family: 'IBM Plex Serif', Georgia, serif; }
.font-display, .font-body { font-family: 'IBM Plex Sans', Helvetica, 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.33; letter-spacing: 0.32px; }
.text-sm { font-size: 15px; line-height: 1.45; letter-spacing: 0.16px; }
.text-base { font-size: 18px; line-height: 1.5; letter-spacing: 0; }
.text-lg { font-size: 22px; line-height: 1.4; }
.text-xl { font-size: 28px; line-height: 1.3; }
.text-2xl { font-size: 42px; line-height: 1.2; font-weight: 300; letter-spacing: 0; }
.text-3xl { font-size: 60px; line-height: 1.15; font-weight: 300; letter-spacing: -0.4px; }
.text-4xl { font-size: 76px; line-height: 1.1; font-weight: 300; letter-spacing: -0.5px; }
.text-5xl { font-size: 104px; line-height: 1.0; font-weight: 300; letter-spacing: -0.8px; }
.text-data { font-size: 220px; line-height: 0.95; letter-spacing: -2px; font-weight: 300; font-feature-settings: 'tnum'; }

.fw-300 { font-weight: 300; }
.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.12em; }

/* Colors */
.text-ink { color: var(--ink); }
.text-body { color: var(--ink); }
.text-label { color: var(--ink-muted); }
.text-muted { color: var(--ink-subtle); }
.text-accent { color: var(--primary); }
.text-error { color: var(--error); }
.text-success { color: var(--success); }
.text-on-dark { color: var(--inverse-ink); }
.text-on-dark-soft { color: var(--inverse-ink-muted); }
.bg-surface { background: var(--canvas); }
.bg-alt { background: var(--surface-1); }
.bg-dark { background: var(--inverse-canvas); color: var(--inverse-ink); }
.bg-blue { background: var(--primary); color: #fff; }
.bg-accent-soft { background: rgba(15,98,254,0.08); }

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

/* Card — Carbon hairline, no shadow */
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-none);
  padding: var(--s-8);
}
.card--elev { background: var(--surface-1); }
.card--dark { background: var(--inverse-canvas); color: var(--inverse-ink); border-color: var(--inverse-surface-1); }
.card--blue { background: var(--primary); color: #fff; border-color: var(--blue-80); }

/* Eyebrow — Carbon sentence case 14px */
.eyebrow {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  color: var(--ink-muted);
}
.eyebrow--blue { color: var(--primary); }

/* Carbon underline accent on data callouts */
.cb-underline {
  border-bottom: 4px solid var(--primary);
  padding-bottom: var(--s-2);
}
.cb-underline--error { border-bottom-color: var(--error); }

/* Pill — Carbon rarely uses pills, mostly rectangular tags */
.tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface-1);
  color: var(--ink);
  border-radius: var(--r-none);
  padding: 6px 14px;
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.16px;
}
.tag--blue { background: rgba(15,98,254,0.1); color: var(--primary); }

.rule { height: 1px; background: var(--hairline); border: 0; }
.rule--strong { background: var(--hairline-strong); height: 2px; }
.rule--dark { background: var(--inverse-surface-1); }
.rule--blue { background: var(--primary); height: 2px; }

/* Headers / footers — Carbon top-nav style */
.slide-header {
  position: absolute; top: 0; left: 0; right: 0;
  height: 64px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 64px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
}
.slide-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 56px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 64px;
  background: var(--surface-1);
  color: var(--ink-muted);
  font-size: 13px;
  letter-spacing: 0.16px;
}
.brand-mark {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  letter-spacing: 0;
}
.brand-mark__lozenge {
  width: 24px; height: 24px;
  background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: -0.04em;
}