/* tokens-raycast.css — palestra Docente 5.0
 *
 * Sistema visual Raycast adaptado para projeção (1471x956 px, audiência distante,
 * tipografia escalada para palco). Origem: templates/ferramentas/design-md/raycast/DESIGN.md
 *
 * Adaptações canônicas do contexto "projection":
 *   - Display escala de 64px → 112px; sections 56px → 80px
 *   - Body cresce 16px → 22px, body-lg 18px → 28px
 *   - Pesos: heading sobe de 500 para 600 (legibilidade à distância)
 *   - Mantida a paleta dark-only nativa (Raycast não tem light mode)
 *   - Hero stripe gradient (ff5757 → a1131a) é o accent humano-quente que
 *     tensiona contra o preto cyber. Reservado para capa e moments de ênfase
 *   - Inter com ss03 stylistic set habilitado (assinatura da marca)
 */

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

:root {
  /* === Surface ladder (dark-only) === */
  --canvas: #07080a;
  --surface: #0d0d0d;
  --surface-elevated: #101111;
  --surface-card: #121212;
  --button-fg: #18191a;

  /* === Hairlines === */
  --hairline: #242728;
  --hairline-soft: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  /* === Text === */
  --ink: #f4f4f6;
  --body: #cdcdcd;
  --charcoal: #d3d3d4;
  --mute: #9c9c9d;
  --ash: #6a6b6c;
  --stone: #434345;
  --on-dark: #ffffff;
  --on-dark-mute: rgba(255, 255, 255, 0.72);
  --on-primary: #000000;

  /* === Primary CTA === */
  --primary: #ffffff;
  --primary-pressed: #e8e8e8;

  /* === Accents semânticos (raros, só em dado ou destaque) === */
  --accent-blue: #57c1ff;
  --accent-blue-soft: rgba(87, 193, 255, 0.15);
  --accent-red: #ff6161;
  --accent-red-soft: rgba(255, 97, 97, 0.15);
  --accent-green: #59d499;
  --accent-green-soft: rgba(89, 212, 153, 0.15);
  --accent-yellow: #ffc533;
  --accent-yellow-soft: rgba(255, 197, 51, 0.15);

  /* === Brand gradient (signature) === */
  --hero-stripe-start: #ff5757;
  --hero-stripe-end: #a1131a;
  --key-bg-start: #121212;
  --key-bg-end: #0d0d0d;

  /* === Spacing (projection-scaled, base 8px mantida) === */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-section: 96px;

  /* === Radii === */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === Typography escalada para projeção === */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-feature: "calt", "kern", "liga", "ss03";

  --text-hero: 112px;       /* slide-title principal */
  --text-display: 80px;     /* section headline */
  --text-headline: 56px;    /* subtítulo de bloco */
  --text-xl: 40px;          /* heading XL projection */
  --text-lg: 32px;          /* heading LG projection */
  --text-md: 28px;          /* body-lg projection */
  --text-base: 22px;        /* body padrão projection */
  --text-sm: 18px;          /* caption projection */
  --text-xs: 14px;          /* metadata, slide number */

  --leading-tight: 1.02;
  --leading-snug: 1.15;
  --leading-normal: 1.35;
  --leading-relaxed: 1.5;
}

/* === Reset mínimo === */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Slide canvas (3 zonas simétricas) === */
.slide {
  position: relative;
  width: 1471px;
  height: 956px;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  padding: 110px 120px 130px;  /* top : sides : bottom (safe zone p/ meta) */
  overflow: hidden;
}

/* Zona central que recebe título + corpo. Centraliza verticalmente entre eyebrow e meta. */
.slide__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;  /* `safe` previne overflow quando conteúdo > container */
  gap: 32px;
  min-height: 0;
  max-height: 100%;
}
.slide__main--top { justify-content: flex-start; padding-top: 8px; }
.slide__main--gap-sm { gap: 20px; }
.slide__main--gap-md { gap: 40px; }
.slide__main--gap-lg { gap: 56px; }

/* slide__main reseta margens externas dos filhos para não conflitar com o gap */
.slide__main > * { margin-top: 0; margin-bottom: 0; }

/* === Utilities de spacing (mapeiam para --space-N, eliminam inline styles) === */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* === Containers com largura máxima legível === */
.maxw-narrow { max-width: 920px; }
.maxw-prose  { max-width: 1100px; }
.maxw-wide   { max-width: 1200px; }
.maxw-full   { max-width: 100%; }

/* Surface ladder helpers */
.slide--elevated { background: var(--surface); }
.slide--card { background: var(--surface-card); }

/* === Slide number (top-right) — escondido por escolha editorial.
   Mantemos a numeração apenas no slide__meta (rodapé direito). */
.slide__num {
  display: none;
}

/* === Slide eyebrow === */
.slide__eyebrow {
  color: var(--mute);
  font-size: var(--text-sm);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 var(--space-3);
}

/* === Slide title === */
.slide__title {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  max-width: 1100px;
}
.slide__title--md {
  font-size: var(--text-display);
  letter-spacing: -0.03em;
}

/* === Slide subtitle / lead === */
.slide__lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--body);
  max-width: 1100px;
  margin: var(--space-4) 0 0;
  font-weight: 400;
}

/* === Slide body === */
.slide__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--body);
  max-width: 900px;
  margin: var(--space-3) 0 0;
}

.slide__body strong { color: var(--ink); font-weight: 600; }
.slide__body em { color: var(--on-dark); font-style: normal; font-weight: 500; }

/* === Hero stripe gradient (signature) — capa e raros moments === */
.hero-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 240px;
  z-index: 0;  /* fica atrás do conteúdo textual */
  background: linear-gradient(
    105deg,
    var(--hero-stripe-end) 0%,
    var(--hero-stripe-start) 35%,
    transparent 70%
  );
  opacity: 0.92;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

/* Conteúdo do .slide sempre acima da .hero-stripe (eyebrow, num, main, meta).
   Exclui slide__num e slide__meta que TÊM que manter position: absolute. */
.slide > :not(.hero-stripe):not(.slide__num):not(.slide__meta) {
  position: relative;
  z-index: 1;
}
.slide > .slide__num,
.slide > .slide__meta {
  z-index: 2;
}
.hero-stripe::before,
.hero-stripe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    var(--hero-stripe-end) 0%,
    var(--hero-stripe-start) 30%,
    transparent 60%
  );
  mix-blend-mode: screen;
}
.hero-stripe::before { transform: translateY(28px); opacity: 0.55; }
.hero-stripe::after { transform: translateY(56px); opacity: 0.3; }

/* === Cards === */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
}
.card--elevated {
  background: var(--surface-elevated);
}
.card--featured {
  background: var(--surface-card);
  border-color: var(--hairline-strong);
}

/* === Grid helpers === */
.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* === Stat / KPI === */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat__value {
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.stat__label {
  font-size: var(--text-sm);
  color: var(--mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* === Frase-âncora (quote) === */
.quote {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 1180px;
}
.quote--md {
  font-size: var(--text-headline);
  letter-spacing: -0.02em;
}
.quote em {
  font-style: normal;
  color: var(--hero-stripe-start);
  font-weight: 700;
}

/* === Keycap (signature Raycast) === */
.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--key-bg-start) 0%, var(--key-bg-end) 100%);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}

/* === Accent helpers === */
.text-accent { color: var(--hero-stripe-start); }
.text-blue { color: var(--accent-blue); }
.text-green { color: var(--accent-green); }
.text-yellow { color: var(--accent-yellow); }
.text-red { color: var(--accent-red); }
.text-mute { color: var(--mute); }
.text-ink { color: var(--ink); }
.text-on-dark { color: var(--on-dark); }

.bg-canvas { background: var(--canvas); }
.bg-surface { background: var(--surface); }
.bg-elevated { background: var(--surface-elevated); }

/* === Footer / metadata line === */
.slide__meta {
  position: absolute;
  bottom: 48px;
  left: 120px;
  right: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--ash);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.slide__meta .stripe-mark {
  display: inline-block;
  width: 32px;
  height: 4px;
  background: linear-gradient(90deg, var(--hero-stripe-end), var(--hero-stripe-start));
  border-radius: var(--radius-xs);
  margin-right: 12px;
  vertical-align: middle;
}

/* === Tag / pill === */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
  color: var(--on-dark-mute);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* === Tabela enxuta para dado (Camada 4) === */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  color: var(--body);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.data-table th {
  color: var(--mute);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.data-table td strong { color: var(--ink); font-weight: 600; }
.data-table tr:last-child td { border-bottom: none; }

/* === Bar (gráfico Goh 2024) === */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 380px;
  margin: var(--space-4) 0 0;
}
.bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.bar__column {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 700;
}
.bar--featured .bar__column {
  background: linear-gradient(180deg, var(--hero-stripe-start) 0%, var(--hero-stripe-end) 100%);
  border-color: var(--hero-stripe-start);
  color: var(--on-dark);
}
.bar__label {
  font-size: var(--text-sm);
  color: var(--mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
}