/* =====================================================================================
   Sem Assinatura · tokens do sistema visual
   Fonte da verdade dos valores: marca/tokens.json (o app nativo importa de lá).
   Tema escuro é o padrão. Tema claro: <html data-tema="claro">. Mesmo roxo nos dois.
   Contraste do texto conferido (WCAG AA) — ver GUIA.md.
   ===================================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fontes/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  src: url("fontes/sora-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ---- escala do roxo da marca (igual nos dois temas) ---- */
  --roxo-50: #f4f3ff;
  --roxo-100: #ebe9ff;
  --roxo-200: #d6d3ff;
  --roxo-300: #b4adff;
  --roxo-400: #8b84ff;   /* O roxo da marca */
  --roxo-500: #6d63f5;
  --roxo-600: #5b50e8;
  --roxo-700: #4c41d6;
  --roxo-800: #3a2fa8;
  --roxo-900: #251e6b;
  --roxo-950: #140f3a;
  --lilas-400: #c47dff;
  --rosa-400: #f08bd6;
  --gradiente-marca: linear-gradient(135deg, #8b84ff 0%, #c47dff 55%, #f08bd6 100%);
  --gradiente-marca-suave: linear-gradient(135deg, rgba(139, 132, 255, .22), rgba(196, 125, 255, .14) 55%, rgba(240, 139, 214, .12));

  /* ---- cores por função (tema escuro, padrão) ---- */
  --cor-fundo: #0c0a1a;
  --cor-fundo-2: #110e24;
  --cor-superficie: #17142d;
  --cor-superficie-2: #201c3d;
  --cor-superficie-3: #2a2550;
  --cor-linha: #2e2955;
  --cor-linha-forte: #443d78;
  --cor-texto: #f1effc;
  --cor-texto-suave: #b6b1d6;
  --cor-texto-fraco: #9a94c2;
  --cor-marca: #8b84ff;
  --cor-marca-forte: #a59fff;
  --cor-marca-suave: #231e4a;
  --cor-sobre-marca: #0c0a1a;
  --cor-link: #a9a3ff;
  --cor-foco: #c9c5ff;
  --cor-brilho: rgba(139, 132, 255, .45);
  --cor-vidro: rgba(32, 28, 61, .78);
  --cor-veu: rgba(12, 10, 26, .6);

  --cor-sucesso: #4ade80;
  --cor-sucesso-fundo: #0f2a1c;
  --cor-alerta: #fbbf24;
  --cor-alerta-fundo: #2d230c;
  --cor-perigo: #fb7185;
  --cor-perigo-fundo: #33141c;
  --cor-info: #7cb8f5;
  --cor-info-fundo: #13223a;
  --cor-neutro: #b9bfd0;
  --cor-neutro-fundo: #22222f;

  /* botão principal */
  --botao-fundo: var(--gradiente-marca);
  --botao-texto: #0c0a1a;
  --botao-borda: rgba(255, 255, 255, .18);

  /* níveis do raio-x: 1 ativa · 2 provável · 3 possível · 4 parada · 0 débito automático */
  --cor-nivel-1: var(--cor-marca);
  --cor-nivel-1-fundo: var(--cor-marca-suave);
  --cor-nivel-2: var(--cor-info);
  --cor-nivel-2-fundo: var(--cor-info-fundo);
  --cor-nivel-3: var(--cor-alerta);
  --cor-nivel-3-fundo: var(--cor-alerta-fundo);
  --cor-nivel-4: var(--cor-sucesso);
  --cor-nivel-4-fundo: var(--cor-sucesso-fundo);
  --cor-nivel-0: var(--cor-neutro);
  --cor-nivel-0-fundo: var(--cor-neutro-fundo);

  /* ---- tipografia ---- */
  --fonte-titulo: "Sora", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-texto: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-numero: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;   /* usar com tabular-nums */

  --texto-xs: 12px;
  --texto-sm: 14px;
  --texto-md: 16px;
  --texto-lg: 18px;
  --texto-xl: 20px;
  --texto-2xl: 24px;
  --texto-3xl: 30px;
  --texto-4xl: 38px;
  --texto-5xl: 48px;
  --texto-6xl: 60px;
  --texto-display: clamp(34px, 8.6vw, 60px);
  --texto-titulo: clamp(26px, 6.2vw, 40px);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-negrito: 700;
  --peso-extra: 800;

  --linha-titulo: 1.08;
  --linha-subtitulo: 1.25;
  --linha-texto: 1.6;
  --espacamento-titulo: -0.025em;
  --espacamento-rotulo: 0.08em;

  /* ---- espaços (base 4) ---- */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-7: 32px;
  --espaco-8: 40px;
  --espaco-9: 56px;
  --espaco-10: 80px;
  --espaco-11: 112px;
  --margem-lateral: 16px;
  --largura-conteudo: 1120px;
  --largura-texto: 720px;
  --alvo-toque: 48px;

  /* ---- raios ---- */
  --raio-xs: 6px;
  --raio-sm: 10px;
  --raio-md: 14px;
  --raio-lg: 20px;
  --raio-xl: 28px;
  --raio-celular: 44px;
  --raio-pilula: 999px;

  /* ---- sombras ---- */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-2: 0 10px 28px -12px rgba(0, 0, 0, .6);
  --sombra-3: 0 30px 70px -24px rgba(0, 0, 0, .7);
  --sombra-brilho: 0 12px 40px -10px var(--cor-brilho);
  --sombra-foco: 0 0 0 3px var(--cor-fundo), 0 0 0 6px var(--cor-foco);

  /* ---- movimento ---- */
  --dur-instante: 90ms;
  --dur-rapida: 160ms;
  --dur-media: 280ms;
  --dur-lenta: 480ms;
  --dur-cena: 900ms;
  --dur-contador: 1600ms;
  --dur-frase: 3200ms;
  --dur-giro: 2400ms;
  --curva-padrao: cubic-bezier(.2, .7, .2, 1);
  --curva-entrada: cubic-bezier(.16, 1, .3, 1);
  --curva-saida: cubic-bezier(.7, 0, .84, 0);
  --curva-mola: cubic-bezier(.34, 1.56, .64, 1);
  --curva-linear: linear;

  /* ---- camadas ---- */
  --z-topo: 50;
  --z-barra: 60;
  --z-sobreposicao: 100;
}

/* ---- tema claro: mesmo roxo, ajustado para contraste em fundo claro ---- */
:root[data-tema="claro"] {
  color-scheme: light;
  --cor-fundo: #f7f6fe;
  --cor-fundo-2: #efedfc;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f3f1fd;
  --cor-superficie-3: #e9e6fb;
  --cor-linha: #e2def5;
  --cor-linha-forte: #cbc5ec;
  --cor-texto: #16132b;
  --cor-texto-suave: #55507a;
  --cor-texto-fraco: #66618c;
  --cor-marca: #5b50e8;
  --cor-marca-forte: #4c41d6;
  --cor-marca-suave: #ebe9ff;
  --cor-sobre-marca: #ffffff;
  --cor-link: #4c41d6;
  --cor-foco: #5b50e8;
  --cor-brilho: rgba(91, 80, 232, .32);
  --cor-vidro: rgba(255, 255, 255, .82);
  --cor-veu: rgba(247, 246, 254, .7);

  --cor-sucesso: #157a3c;
  --cor-sucesso-fundo: #e3f5ea;
  --cor-alerta: #8f5400;
  --cor-alerta-fundo: #fdf1d8;
  --cor-perigo: #be1e37;
  --cor-perigo-fundo: #fde8ec;
  --cor-info: #1d5fa8;
  --cor-info-fundo: #e2edf9;
  --cor-neutro: #4b5263;
  --cor-neutro-fundo: #eceef3;

  --botao-fundo: linear-gradient(135deg, #5b50e8 0%, #4c41d6 60%, #3a2fa8 100%);
  --botao-texto: #ffffff;
  --botao-borda: rgba(255, 255, 255, .22);

  --sombra-1: 0 1px 2px rgba(22, 19, 43, .08);
  --sombra-2: 0 10px 28px -14px rgba(22, 19, 43, .28);
  --sombra-3: 0 30px 70px -28px rgba(37, 30, 107, .38);
}

@media (min-width: 720px) {
  :root { --margem-lateral: 24px; }
}

/* Movimento reduzido: as transições ficam instantâneas; as animações nomeadas já tratam isso no JS/CSS. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instante: 0.01ms;
    --dur-rapida: 0.01ms;
    --dur-media: 0.01ms;
    --dur-lenta: 0.01ms;
    --dur-cena: 0.01ms;
  }
}