/* =====================================================================
   PREVI — tokens
   O vocabulário de design do produto inteiro, num arquivo só. Carregado
   pelo app e pela página de apresentação, nesta ordem, antes do CSS de
   cada um.

   Antes eram dois sistemas paralelos com os mesmos valores e nomes
   diferentes: --ink aqui era --text ali, --brand era --primary. Pior,
   --bg queria dizer o fundo da página num arquivo e a superfície
   secundária no outro — o mesmo nome, duas coisas.
   ===================================================================== */

/* ===== Design tokens =====
   O escuro é o padrão do PREVI: é o que aparece sem ninguém escolher nada.
   O claro é uma escolha, e vem do botão no menu, que grava data-theme="light"
   na raiz. Antes o app obedecia o modo do sistema e não havia como discordar.

   As duas paletas são a mesma identidade, não dois desenhos: o mesmo índigo,
   o mesmo verde, o mesmo vermelho — cada um no degrau que funciona sobre o
   seu fundo. Escuro sobre claro precisa de mais peso; claro sobre escuro,
   de menos. Trocar só o fundo apagaria metade das cores.

   O que não depende do fundo — fontes, raios — fica aqui em cima, uma vez só.
   ===================================================================== */
:root {
    --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;

    /* --- escala tipográfica ---------------------------------------------
       Oito degraus, e nada fora deles. Antes eram 37 tamanhos diferentes em
       145 declarações — cinco só entre 0,84 e 0,88rem, meio pixel de
       diferença que ninguém enxerga mas que fazia cada tela ter a sua régua.
       Tamanho novo no app escolhe um destes; se nenhum servir, o certo é
       discutir o degrau, não acrescentar um avulso. */
    --t-xs: 0.72rem;    /* rótulo em maiúsculas, selo, percentual */
    --t-sm: 0.8rem;     /* apoio, notas de rodapé de cartão */
    --t-md: 0.88rem;    /* corpo de tabela, formulário, texto secundário */
    --t-base: 1rem;     /* corpo */
    --t-lg: 1.15rem;    /* título de cartão */
    --t-xl: 1.35rem;    /* título de seção */
    --t-2xl: 1.6rem;    /* h1 da página, valor em destaque */
    --t-3xl: 1.95rem;   /* número herói */

    /* --- escuro: o padrão --- */
    --page: #0a0a12;
    --bg: #1b1b29;
    --sidebar-bg: #14141f;
    --card-bg: #14141f;
    --text: #f3f3f8;
    --text-secondary: #aeaec6;
    --text-muted: #6e6e8a;
    --border: #262636;
    --border-strong: #35354c;

    --primary: #6d68f0;
    --primary-hover: #8f8bff;
    --primary-soft: #1b1938;
    --primary-line: #3a3670;
    --primary-text-on: #ffffff;

    --positive: #3bc687;
    --positive-soft: #102b21;
    --negative: #f37066;
    --negative-soft: #351816;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .45);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 34px rgba(0, 0, 0, .5), 0 40px 80px rgba(0, 0, 0, .45);
    --shadow-brand: 0 10px 30px rgba(109, 104, 240, .35);

    --grid-line: rgba(255, 255, 255, .045);
    --focus-ring: 0 0 0 3px rgba(143, 139, 255, .4);
}

/* --- claro: a escolha --- */
:root[data-theme="light"] {
    --page: #f7f7fb;
    --bg: #f1f1f8;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --text: #12122a;
    --text-secondary: #4c4c66;
    --text-muted: #8a8aa4;
    --border: #e5e5ef;
    --border-strong: #d0d0e0;

    /* O índigo escurece: #6d68f0 sobre branco não sustenta texto. */
    --primary: #4f46e5;
    --primary-hover: #6d68f0;
    --primary-soft: #eef0ff;
    --primary-line: #c7c4f7;
    --primary-text-on: #ffffff;

    --positive: #12925a;
    --positive-soft: #e7f7ee;
    --negative: #d92d20;
    --negative-soft: #fdeceb;

    /* Sombra no claro é a tinta do texto diluída, não preto puro: preto sobre
       branco suja, e a peça perde o assentamento. */
    --shadow-sm: 0 1px 2px rgba(18, 18, 42, .05);
    --shadow-md: 0 1px 2px rgba(18, 18, 42, .04), 0 8px 20px rgba(18, 18, 42, .07);
    --shadow-lg: 0 2px 4px rgba(18, 18, 42, .04), 0 14px 30px rgba(18, 18, 42, .09), 0 36px 70px rgba(18, 18, 42, .09);
    --shadow-brand: 0 8px 24px rgba(79, 70, 229, .30);

    --grid-line: rgba(18, 18, 42, .05);
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, .35);
}

/* --- degraus de display: só a página de apresentação usa ---------------
   Fluidos porque um título de herói tem de caber no celular sem quebrar
   no meio da palavra. O app não tem títulos desse porte. */
:root {
    --t-display-sm: clamp(1.6rem, 3.4vw, 2.25rem);
    --t-display: clamp(1.75rem, 4.4vw, 2.65rem);
    --t-display-lg: clamp(2.4rem, 6.4vw, 4.25rem);
    --t-lead: clamp(1rem, 2vw, 1.18rem);   /* parágrafo de abertura de seção */
    --radius-xl: 28px;
}