/* ════════════════════════════════════════════════════════════════════════════
   ESPELHO — DESIGN SYSTEM (fonte única de verdade)   ·   "sério jovem"
   Carregado ANTES do CSS de cada página. Define tokens e componentes
   compartilhados pra que a plataforma inteira fale uma língua visual só.

   Régua: nova tela puxa os tokens e as classes .ds-* daqui — nada de hardcode.
   O que já valia nas páginas vivas foi PRESERVADO (mesmos valores) pra não haver
   regressão; a camada nova é a identidade "sério jovem" (bege quente, roxo sóbrio,
   quase-preto, lima de aprovação) que os módulos futuros herdam de fábrica.

   A reconciliação das páginas vivas (index/passe/repescagem/app) com esta
   identidade é um passo separado, feito com verificação visual (Passo 4).
════════════════════════════════════════════════════════════════════════════ */
:root {
  /* O Espelho e de tema unico (claro) de proposito. Sem declarar isso, num
     sistema em modo escuro o navegador pinta o que ELE desenha — popup do
     seletor de data, barra de rolagem, autofill — em escuro dentro de uma
     pagina clara. Uma linha evita o descasamento. */
  color-scheme: light;

  /* ── Escala de espaçamento (base 4) ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ── Raios (escala única) ── */
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* ── Sombras (uma rampa coerente, cor neutra única) ── */
  --shadow-sm: 0 2px 8px rgba(52,52,52,.06);
  --shadow-md: 0 8px 24px rgba(52,52,52,.08);
  --shadow-lg: 0 18px 44px rgba(52,52,52,.10);
  --shadow-xl: 0 30px 70px rgba(52,52,52,.16);
  --shadow-dark: 0 30px 80px rgba(0,0,0,.35);   /* card sobre fundo escuro */
  /* Sombra "lift" da identidade sério-jovem (sombra baixa, difusa, quase-preto) */
  --shadow-lift: 0 26px 50px -30px rgba(38,38,43,.30);

  /* ── Cores semânticas — a lógica do corte FGV, usada em toda a plataforma ──
     Mapeadas aos valores já em uso (verde do corte, laranja "perto", vermelho
     "abaixo") pra JS (tone()) e CSS falarem a MESMA cor. */
  --success: #1f9d55; --success-soft: #e9f7ef;
  --warn:    #E08A2B; --warn-soft:    #fbf1e3;
  --danger:  #B91C1C; --danger-soft:  #fbeeec;
  --info:    #486FC4; --info-soft:    #DDF1FD;   /* azul informativo / links / linha de corte */

  /* ── Tipografia ── */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-eyebrow: .78rem; --fs-small: .875rem; --fs-body: 1rem; --fs-lg: 1.125rem;
  --fs-h3: 1.2rem; --fs-h2: clamp(1.6rem, 3.4vw, 2.5rem); --fs-h1: clamp(2rem, 5vw, 3.4rem);
  --lh-tight: 1.14; --lh-body: 1.6;

  /* ── Transições / motion ── */
  --ease: cubic-bezier(.2,.8,.2,1);       /* padrão: sai rápido, assenta suave */
  --ease-out: cubic-bezier(.16,1,.3,1);   /* entrada de elemento (decelera forte) */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* "pop" com leve overshoot (feedback) */
  --dur-1: .12s; --dur-2: .2s; --dur-3: .32s; --dur-4: .5s;  /* durações nomeadas */
  --t-fast: .15s var(--ease); --t-med: .25s var(--ease); --t-slow: .4s var(--ease);

  /* ── Camadas (z-index) ── */
  --z-header: 200; --z-overlay: 900; --z-modal: 1000;

  /* ── Alvo de toque (o piso, não o tamanho) ──
     44px é o mínimo do WCAG 2.5.5 e do guia da Apple; o Material pede 48. O aluno
     abre o laudo no celular, no ônibus, com o polegar — controle de 31px ali é erro
     de acessibilidade, não questão de gosto.
     A regra é: todo controle AUTÔNOMO (botão, CTA, aba, item de navegação) tem
     min-height: var(--tap-min). Link dentro de frase NÃO entra — o WCAG isenta o
     link inline justamente porque esticá-lo quebraria o parágrafo.
     Cresce a área de toque, não a tipografia: o padding lateral e o font-size de
     cada botão continuam os dele. */
  --tap-min: 44px;

  /* ── Tokens de marca migrados de styles.css (P9) ──
     Desacoplam o app do CSS de marketing: o app resolve estes por aqui e não
     precisa carregar o styles.css. Mesmos valores de sempre — nas páginas de
     marketing o styles.css os redefine idêntico depois, então nada muda lá. */
  --preto: #343434; --cinza-texto: #808080; --cinza-claro: #898989;
  --borda: #E5E7EB; --bg2: #F8FAFC; --radius-big: 24px;
  --azul-destaque: #486FC4; --azul-card: #94AEEA; --azul-pill: #DDF1FD;
  --roxo: #808DD4; --lilas-fundo: #F3E3FF; --lima: #A9DC57; --lima-claro: #E9F1B5;
  --laranja: #F2B267; --red: #B91C1C;

  /* ════════════════════════════════════════════════════════════════════════
     IDENTIDADE "SÉRIO JOVEM" (a paleta que os módulos novos herdam)
     Camada semântica: dê nome ao papel, não à cor. Toda tela nova referencia
     estes — trocar a marca inteira vira ajuste de meia dúzia de linhas aqui.
  ════════════════════════════════════════════════════════════════════════ */

  /* Superfícies — fundo bege quente + cartão branco */
  --bg-warm:    #FAFAF8;   /* fundo de página da plataforma (sério jovem) */
  --surface:    #FFFFFF;   /* cartão / painel */
  --surface-2:  #F8FAFC;   /* superfície recuada (linhas zebradas, insets) */

  /* Texto — quase-preto + apoio.
     Nome próprio (--fg*) de propósito: a paleta da ferramenta (styles.css) já
     ocupa --ink com outro valor (#111827) e carrega depois; usar --fg evita a
     colisão e mantém o DS como fonte de verdade do texto sério-jovem. */
  --fg:        #26262B;   /* títulos e texto forte (sério jovem) */
  --fg-soft:   #6E6C77;   /* texto de apoio / subtítulos */
  --fg-faint:  #8A8892;   /* legendas, eixos, metadados */

  /* Acento de marca — ROXO SÓBRIO (não azul saturado) */
  --accent:        #808DD4;   /* = --roxo · destaque de marca, highlights, CTA de acento */
  --accent-strong: #6975C0;   /* hover/borda do acento */
  --accent-soft:   #EEF0FB;    /* fundo de pill/realce de acento */
  --accent-ring:   rgba(128,141,212,.32);  /* anel de foco / seleção */

  /* Aprovação — lima (cor da nota que passa) */
  --approve:      #5f8a1f;   /* verde-lima escuro: eyebrows, borda do plano em destaque */
  --approve-ink:  #31460f;   /* texto sobre fundo lima */

  /* Superfície escura — a ÚNICA por tela, reservada à ação primária (o próximo
     movimento na home, o caso a treinar na Evolução). Mora aqui, e não no tema da
     plataforma, porque a regra "uma superfície pesada por tela" vale para o produto
     inteiro; o platform-theme.css só troca o tom (quase-preto → azul-marinho). */
  --surface-dark:      #26262B;
  --surface-dark-ink:  #FFFFFF;
  --surface-dark-soft: #B9C2F0;   /* texto de apoio sobre a superfície escura */

  /* ── Aliases de compatibilidade (não use em código novo; existem só pra
     páginas legadas resolverem os mesmos valores por aqui) ── */
  --font-display: var(--font); --font-body: var(--font);
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENTES COMPARTILHADOS (.ds-*) — a biblioteca dos módulos futuros.
   Não colidem com as classes atuais das páginas; são a base do que vem.
   Nascem já na identidade sério-jovem (acento = roxo).
════════════════════════════════════════════════════════════════════════════ */

/* Container */
.ds-container { width: min(1120px, 92vw); margin-inline: auto; }
.ds-container--narrow { width: min(760px, 92vw); }

/* Botão */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-min);
  font-family: inherit; font-weight: 700; font-size: var(--fs-body); line-height: 1;
  padding: 15px 26px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-med), background var(--t-med), color var(--t-med), border-color var(--t-med), filter var(--t-med);
}
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.ds-btn--primary { background: var(--fg, #26262B); color: #fff; box-shadow: var(--shadow-md); }
.ds-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ds-btn--ghost { background: var(--surface, #fff); color: var(--fg, #26262B); border-color: var(--borda, #E5E7EB); }
.ds-btn--ghost:hover { border-color: var(--fg, #26262B); transform: translateY(-1px); }
.ds-btn--accent { background: var(--accent); color: #fff; }
.ds-btn--accent:hover { background: var(--accent-strong); transform: translateY(-1px); }
.ds-btn--block { width: 100%; }
.ds-btn[disabled], .ds-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Card */
.ds-card {
  background: var(--surface, #fff); border: 1px solid var(--borda, #E5E7EB); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-6);
}
.ds-card--lg { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--sp-8); }
.ds-card--lift { box-shadow: var(--shadow-lift); }
.ds-card--flat { box-shadow: none; }

/* Seção */
.ds-section { padding: var(--sp-20) 0; }
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-eyebrow);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3);
}
.ds-eyebrow--lime { color: var(--approve); }
.ds-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ds-eyebrow--lime .ds-eyebrow__dot { background: var(--lima); box-shadow: 0 0 0 4px rgba(169,220,87,.25); }
.ds-h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--fg, #26262B); }
.ds-hl { color: var(--accent); }   /* palavra destacada no título (roxo) */

/* Pill — rótulo neutro com pontinho colorido (padrão dos hero-pills) */
.ds-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: var(--surface, #fff); border: 1px solid var(--borda, #E5E7EB);
  border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600; color: var(--fg-soft, #6E6C77);
}
.ds-pill__dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--accent); }
.ds-pill--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
.ds-pill--lime   { color: var(--approve); }
.ds-pill--lime .ds-pill__dot { background: var(--lima); }

/* Selo semântico (faixa do corte) */
.ds-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 700; }
.ds-tag--success { background: var(--success-soft); color: var(--success); }
.ds-tag--warn    { background: var(--warn-soft);    color: var(--warn); }
.ds-tag--danger  { background: var(--danger-soft);  color: var(--danger); }
.ds-tag--info    { background: var(--info-soft);    color: var(--info); }
.ds-tag--accent  { background: var(--accent-soft);  color: var(--accent-strong); }

/* Utilitários de layout */
.ds-stack > * + * { margin-top: var(--sp-4); }
.ds-row { display: flex; align-items: center; gap: var(--sp-3); }
.ds-muted { color: var(--fg-soft, #6E6C77); }

/* ════════════════════════════════════════════════════════════════════════════
   MICRO-INTERAÇÕES & ESTADOS   ·   a camada "premium" (regra de toda tela)
   Toda tela nova usa estes primitivos pra hover, foco, entrada, progresso,
   carregamento (skeleton) e feedback de ação. É o detalhe que faz o sério-jovem
   parecer caro e confiável — sem ele, cada tela vira remendo estático.

   Acessibilidade: tudo respeita prefers-reduced-motion (bloco no fim). Não use
   animação como única forma de comunicar estado — sempre há cor/texto junto.
════════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes base (uma biblioteca só) ── */
@keyframes ds-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-rise-in   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ds-pop-in    { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ds-spin      { to { transform: rotate(360deg); } }
@keyframes ds-shimmer   { 100% { background-position-x: -200%; } }
@keyframes ds-pulse     { 50% { opacity: .5; } }
@keyframes ds-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes ds-bar-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Entrada de elemento (opt-in) — revela conteúdo com classe ── */
.ds-animate-in    { animation: ds-rise-in var(--dur-3) var(--ease-out) both; }
.ds-animate-fade  { animation: ds-fade-in var(--dur-3) var(--ease-out) both; }
.ds-animate-pop   { animation: ds-pop-in  var(--dur-2) var(--ease-spring) both; }
/* Stagger: filhos entram em cascata (até 8). Pôr .ds-stagger no container. */
.ds-stagger > *   { animation: ds-rise-in var(--dur-3) var(--ease-out) both; }
.ds-stagger > *:nth-child(1) { animation-delay: .04s; }
.ds-stagger > *:nth-child(2) { animation-delay: .09s; }
.ds-stagger > *:nth-child(3) { animation-delay: .14s; }
.ds-stagger > *:nth-child(4) { animation-delay: .19s; }
.ds-stagger > *:nth-child(5) { animation-delay: .24s; }
.ds-stagger > *:nth-child(6) { animation-delay: .29s; }
.ds-stagger > *:nth-child(7) { animation-delay: .34s; }
.ds-stagger > *:nth-child(8) { animation-delay: .39s; }

/* ── Hover / press (interações táteis) ── */
.ds-hover-lift { transition: transform var(--t-fast), box-shadow var(--t-med); }
.ds-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ds-pressable { transition: transform var(--dur-1) var(--ease); }
.ds-pressable:active { transform: scale(.97); }
.ds-hover-accent { transition: color var(--t-fast), border-color var(--t-fast); }
.ds-hover-accent:hover { color: var(--accent-strong); }
/* Foco visível consistente (teclado) — combine com qualquer alvo interativo */
.ds-focusable:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: var(--radius-sm); }

/* ── Estado de carregamento: SKELETON ── */
.ds-skeleton {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 0%, #eef0f4 20%, var(--surface-2) 40%);
  background-size: 200% 100%; animation: ds-shimmer 1.3s linear infinite;
  color: transparent !important; user-select: none; pointer-events: none;
}
.ds-skeleton * { visibility: hidden; }
.ds-skeleton-line  { height: .8em; margin: .35em 0; border-radius: var(--radius-pill); }
.ds-skeleton-line--sm { width: 40%; } .ds-skeleton-line--lg { width: 90%; }
.ds-skeleton-block { height: 120px; }
.ds-skeleton-circle { border-radius: 50%; }

/* ── Feedback de ação: SPINNER ── */
.ds-spinner {
  display: inline-block; width: 18px; height: 18px; vertical-align: -3px;
  border: 2.5px solid var(--accent-ring); border-top-color: var(--accent);
  border-radius: 50%; animation: ds-spin .7s linear infinite;
}
.ds-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.ds-spinner--light { border-color: rgba(255,255,255,.35); border-top-color: #fff; }

/* Botão em carregamento: .is-loading esconde o texto e mostra o spinner */
.ds-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.ds-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}
.ds-btn--ghost.is-loading::after { border-color: var(--accent-ring); border-top-color: var(--accent); }

/* ── Progresso: barra determinada + indeterminada ── */
.ds-progress { position: relative; height: 8px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.ds-progress__bar {
  height: 100%; width: 0; border-radius: inherit; background: var(--accent);
  transform-origin: left; transition: width var(--t-slow);
}
.ds-progress__bar--approve { background: var(--lima); }
/* Barra que anima ao aparecer: setar --p (0–100) e classe --animated */
.ds-progress__bar--animated { animation: ds-bar-grow var(--dur-4) var(--ease-out) both; }
.ds-progress--indeterminate .ds-progress__bar {
  width: 40%; position: absolute; left: -40%; animation: ds-indeterminate 1.1s var(--ease) infinite;
}

/* Anel de progresso (streak / meta do dia): use conic-gradient via --p */
.ds-ring {
  --p: 0; --size: 56px; width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; transition: background var(--t-slow);
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0);
}
.ds-ring::before { content: ""; position: absolute; width: calc(var(--size) - 12px); height: calc(var(--size) - 12px); border-radius: 50%; background: var(--surface); }
.ds-ring > * { position: relative; }

/* ── Feedback de ação: TOAST ── */
.ds-toast {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--fg); color: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: var(--fs-small);
  animation: ds-rise-in var(--dur-3) var(--ease-out) both;
}
.ds-toast--success { background: var(--success); }
.ds-toast--danger  { background: var(--danger); }

/* Check "pop" (confirmação de ação concluída) */
.ds-check-pop { animation: ds-pop-in var(--dur-2) var(--ease-spring) both; }

/* ── Acessibilidade: respeitar quem pediu menos movimento ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .ds-skeleton { animation: none; background: var(--surface-2); }
}