/* ============================================================
   TN.CO — tokens.css
   Fonte única de valores. Carregue ANTES de qualquer outro CSS.
   Nenhum outro arquivo declara :root. Nenhum outro arquivo usa hex literal.
   Skin padrão: tnco-dark. As demais vivem em skins.css.
   ============================================================ */

:root {
  /* ── Famílias ───────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Superfície ─────────────────────────────────────────── */
  --bg-base:     #050505;
  --bg-surface:  #0b0b0b;
  --bg-elevated: #111111;
  --bg-input:    #131313;

  /* ── Borda ──────────────────────────────────────────────── */
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.14);
  --border-focus: rgba(255, 106, 26, 0.50);

  /* ── Ação (o único acento) ──────────────────────────────── */
  --accent:       #FF6A1A;
  --accent-hover: #D95A16;
  --accent-dim:   rgba(255, 106, 26, 0.12);
  /* Tinta sobre o acento chapado.
     Branco sobre #FF6A1A dá 2.87:1 e reprova WCAG AA.
     Quase-preto sobre o mesmo laranja dá 7.11:1 e mantém a cor de marca intacta. */
  --accent-ink:   #050505;

  /* ── CTA: o botão pode ter cor própria, separada do acento.
     Por padrão segue o acento. Uma skin troca só o valor. ── */
  --cta:       var(--accent);
  --cta-hover: var(--accent-hover);
  --cta-ink:   var(--accent-ink);

  /* Cor do pedaço destacado dentro de uma headline. Separada do CTA porque
     precisa passar em contraste sobre o fundo, e o CTA não carrega texto longo. */
  --destaque:  var(--accent);

  /* ── Texto ──────────────────────────────────────────────── */
  --text-1: #F5F5F5;
  --text-2: #A0A0A0;
  --text-3: #8B857C;

  /* ── Estado funcional (nunca decorativo) ────────────────── */
  --green:  #10B981;  --green-dim:  rgba(16, 185, 129, 0.12);
  --red:    #EF4444;  --red-dim:    rgba(239, 68, 68, 0.12);
  --yellow: #F59E0B;  --yellow-dim: rgba(245, 158, 11, 0.12);

  /* ── Raio ───────────────────────────────────────────────── */
  --radius-control: 8px;    /* input, botão, badge */
  --radius-card:    12px;   /* card, painel, imagem */
  --radius-panel:   16px;   /* painel grande, modal, player */
  --radius-pill:    999px;  /* pill, eyebrow, avatar */

  /* ── Espaçamento (base 4px) ─────────────────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-6:  24px;  --sp-8:  32px;  --sp-12: 48px;  --sp-16: 64px;
  --sp-24: 96px;  --sp-30: 120px;

  /* ── Layout ─────────────────────────────────────────────── */
  --container:   1200px;
  --gutter:      24px;
  --measure:     68ch;
  --section-pad: 120px;

  /* ── Escala tipográfica (7 degraus, nada fora daqui) ────── */
  --fs-display: clamp(38px, 5.5vw, 64px);
  --fs-h2:      clamp(28px, 3.4vw, 40px);
  --fs-h3:      clamp(20px, 2.4vw, 24px);
  --fs-lead:    clamp(17px, 2.2vw, 20px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  /* ── Movimento ──────────────────────────────────────────── */
  --t:      250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 700ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Sombra (só para o que flutua de verdade) ───────────── */
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* ── Aliases de transição (CSS legado). Não use em código novo. ── */
  --primary:       var(--accent);
  --primary-hover: var(--accent-hover);
  --bg-card:       var(--bg-surface);
  --text-main:     var(--text-1);
  --text-muted:    var(--text-2);
  --border-sutil:  var(--border);
  --max-width:     var(--container);
}

@media (max-width: 900px) { :root { --section-pad: 72px; } }
@media (max-width: 600px) { :root { --section-pad: 56px; } }

/* ============================================================
   PRIMITIVAS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Layout ─────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section   { padding: var(--section-pad) 0; }
.section--hairline { border-top: 1px solid var(--border); }

/* ── Tipografia ─────────────────────────────────────────── */
.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.h2      { font-family: var(--font-display); font-size: var(--fs-h2);      font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.h3      { font-size: var(--fs-h3);    font-weight: 600; line-height: 1.30; }
.lead    { font-size: var(--fs-lead);  font-weight: 400; line-height: 1.60; color: var(--text-2); }
.small   { font-size: var(--fs-small); line-height: 1.50; color: var(--text-3); }
.micro   { font-size: var(--fs-micro); font-weight: 600; line-height: 1.40; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }

p { max-width: var(--measure); }
.text-2 { color: var(--text-2); }   /* segunda cor da headline em dois tons */
.num    { font-variant-numeric: tabular-nums; }

/* ── Header de seção assimétrico ────────────────────────── */
.section-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-6); align-items: start; margin-bottom: var(--sp-16); }
.section-head__title { grid-column: 1 / span 6; }
.section-head__desc  { grid-column: 8 / span 5; color: var(--text-2); }
.section-head__index { grid-column: 8 / span 5; margin-top: var(--sp-3); }
@media (max-width: 900px) {
  .section-head__title, .section-head__desc, .section-head__index { grid-column: 1 / -1; }
}

/* ── Botões (três papéis) ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-8);
  border: 1px solid transparent; border-radius: var(--radius-control);
  font-family: inherit; font-size: var(--fs-body); font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: transform var(--t), opacity var(--t), background-color var(--t), border-color var(--t);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); border-color: var(--accent); }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }

.btn-primary   { background: var(--cta); color: var(--cta-ink); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-secondary { background: transparent; color: var(--text-1); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--border-hover); }
.btn-ghost     { background: transparent; color: var(--accent); min-height: auto; padding: 0; }
.btn-ghost:hover { text-decoration: underline; }

/* ── Formulário ─────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  background: var(--bg-input); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  font-family: inherit; font-size: 16px;   /* abaixo de 16px o iOS dá zoom e quebra o layout */
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 120px; padding: var(--sp-3) var(--sp-4); line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.field .error { font-size: var(--fs-small); color: var(--red); }
.field.has-error input { border-color: var(--red); }

/* ── Superfícies ────────────────────────────────────────── */
.card  { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--sp-8); }
.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.pill  { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--accent-dim); color: var(--accent); border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* Lista de definição: use no lugar de grade de cards quando as linhas se relacionam */
.deflist { border-top: 1px solid var(--border); }
.deflist > div { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-6); padding: var(--sp-6) 0; border-bottom: 1px solid var(--border); }
@media (max-width: 600px) { .deflist > div { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* Três colunas separadas por régua vertical: leem como uma ideia dividida */
.rulecols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.rulecols > * { padding: 0 var(--sp-8); border-left: 1px solid var(--border); }
.rulecols > *:first-child { padding-left: 0; border-left: none; }
@media (max-width: 900px) {
  .rulecols { grid-template-columns: 1fr; }
  .rulecols > * { padding: var(--sp-6) 0; border-left: none; border-top: 1px solid var(--border); }
  .rulecols > *:first-child { border-top: none; padding-top: 0; }
}

/* ── Tabela de prova ────────────────────────────────────── */
.table-proof { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-proof th, .table-proof td { padding: var(--sp-4) var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); }
.table-proof th { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.table-scroll { overflow-x: auto; }   /* a tabela rola dentro do container, nunca o body */

/* ── Movimento ──────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); animation: ds-reveal var(--t-slow) forwards; }
.reveal.d1 { animation-delay: .15s; } .reveal.d2 { animation-delay: .30s; }
.reveal.d3 { animation-delay: .45s; } .reveal.d4 { animation-delay: .60s; }
@keyframes ds-reveal { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── Mídia ──────────────────────────────────────────────── */
img, video { max-width: 100%; height: auto; display: block; }
.media { border-radius: var(--radius-card); overflow: hidden; }
.media--player { aspect-ratio: 16 / 9; border-radius: var(--radius-panel); }