/* ═══════════════════════════════════════════════════════════════════════
   CJR Financas, design system
   Tres camadas. Componente NUNCA referencia primitiva, so semantica.
   Verificado por: node tools/contraste.mjs
   ═══════════════════════════════════════════════════════════════════════ */

:root{

  /* ── 1. primitivas ───────────────────────────────────────────────────
     Procedencia obrigatoria por token.
     MARCA  = kit enviado pela Cibele em 17/08/2026.
     deriv. = interpolado a partir de um token MARCA.
     Nenhuma cor entra aqui sem uma dessas duas origens.             */

  /* ameixa. matiz ~315, quente. nunca deixar virar azul-violeta. */
  --pl-900:#3A1A35;  /* deriv. de pl-800, fundo profundo */
  --pl-800:#592850;  /* MARCA */
  --pl-700:#6E3E64;  /* deriv. entre 800 e 600 */
  --pl-600:#7D5470;  /* MARCA */
  --pl-400:#A98BA0;  /* deriv. borda sobre escuro */
  --pl-200:#D8C9D4;  /* deriv. */
  --pl-50:#F5EFF3;   /* deriv. secao clara com tom da marca */

  /* areia. o que mantem o conjunto quente. */
  --ar-700:#8A6A4E;  /* deriv. escurecida ate passar AA sobre claro */
  --ar-500:#B98C6A;  /* deriv. */
  --ar-300:#D6B093;  /* MARCA */
  --ar-100:#EFE0D2;  /* deriv. */
  --ar-50:#FAF4EE;   /* deriv. creme quente, substitui o antigo #F5F3EF */

  /* neutra, 12 degraus, puxada pro quente pra casar com a areia */
  --nt-0:#FFFFFF;
  --nt-25:#FCFAF8;
  --nt-50:#F7F3F0;
  --nt-100:#EDE7E3;
  --nt-200:#DED5D0;
  --nt-300:#C4B9B3;
  --nt-400:#A0938D;
  --nt-500:#7B6F6A;
  --nt-600:#5E5450;
  --nt-700:#453D3A;
  --nt-800:#2E2825;
  --nt-900:#1B1715;

  /* estado. PROVISORIO: o print do kit corta os swatches verde, vermelho
     e amarelo. Estes foram harmonizados com ameixa e areia e passam AA,
     mas trocam assim que os hex reais chegarem.                      */
  --vd-700:#3F6B4B;  /* provisorio, verde sage */
  --tj-700:#993524;  /* provisorio, terracota, casa com a areia */
  --am-700:#7D6218;  /* provisorio, mostarda escurecida */

  /* variantes claras dos mesmos tres, so pro tema escuro: em fundo
     escuro precisa de tom claro pra manter 4,5:1, nao da pra usar o
     mesmo 700 que foi calibrado pra fundo branco. */
  --vd-400:#8FBF9A;
  --tj-400:#E3987F;
  --am-400:#D9BB6B;


  /* ── 2. semanticas. e isto que o componente usa ────────────────────── */

  --fundo:var(--ar-50);
  --fundo-alt:var(--nt-0);
  --fundo-escuro:var(--pl-800);
  --fundo-escuro-2:var(--pl-900);
  --superficie:var(--nt-0);
  --superficie-2:var(--nt-25);

  --texto:var(--pl-800);
  --texto-suave:var(--nt-600);
  --texto-inverso:#FFFFFF;
  --texto-inverso-suave:rgba(255,255,255,.82);

  --borda:rgba(89,40,80,.14);
  --borda-forte:rgba(89,40,80,.30);
  /* .22 media 1,91:1 sobre a ameixa: card sem contorno visivel.
     .45 leva a 3,60:1 e cumpre WCAG 1.4.11. */
  --borda-inversa:rgba(255,255,255,.45);

  --acento:var(--pl-600);
  --acento-forte:var(--pl-800);
  --acento-fraco:rgba(125,84,112,.09);
  /* --acento e cor de FUNDO de botao, sempre pareada com texto branco
     fixo no componente, entao pl-600 funciona nos dois temas sem trocar.
     --acento-texto e outra coisa: cor de TEXTO (link, chapeu, cabecalho
     de tabela, seta do FAQ) que fica direto sobre a superficie/fundo da
     secao. Usar --acento pra isso dava 1,83:1 no tema escuro, porque
     pl-600 sobre pl-800/pl-900 e roxo-medio sobre roxo-escuro. */
  --acento-texto:var(--pl-600);
  --destaque:var(--ar-700);
  --destaque-inverso:var(--ar-300);

  --positivo:var(--vd-700);
  --negativo:var(--tj-700);
  --atencao:var(--am-700);
  /* ameixa sobre ameixa mede 1,83:1: o anel de foco sumiria nas secoes
     escuras. Por isso o foco tem duas cores, nao uma. */
  --foco:var(--pl-600);
  --foco-inverso:var(--ar-300);


  /* ── 3. tipografia ─────────────────────────────────────────────────── */

  --f-titulo:"Fraunces","Iowan Old Style",Georgia,serif;
  --f-texto:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-xs:.78rem;
  --t-sm:.875rem;
  --t-base:1rem;
  --t-md:1.0625rem;
  --t-lg:clamp(1.125rem,2.4vw,1.3125rem);
  --t-xl:clamp(1.3125rem,3.4vw,1.625rem);
  --t-2xl:clamp(1.6875rem,5vw,2.25rem);
  --t-3xl:clamp(2.0625rem,6.4vw,2.875rem);
  --t-4xl:clamp(2.4375rem,8vw,3.625rem);

  --lh-titulo:1.1;
  --lh-texto:1.62;
  --lh-num:1;
  --ls-titulo:-.015em;
  --ls-chapeu:.16em;


  /* ── 4. espaco, base 4 ─────────────────────────────────────────────── */

  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;
  --secao-y:clamp(56px,9vw,104px);


  /* ── 5. raio. hierarquia explicita: raio uniforme e tique de IA ────── */

  --r-selo:6px;      /* chapeu, tag de artigo */
  --r-btn:10px;      /* botao */
  --r-campo:12px;    /* input, select */
  --r-card:20px;     /* card de servico, artigo, dor */
  --r-painel:28px;   /* painel da calculadora, unico no site */
  --r-chip:999px;    /* chip de metrica, aba PF/PJ */
  --r-retrato:180px 180px 24px 24px;  /* arco editorial, nunca circulo */


  /* ── 6. elevacao. tres degraus distintos, tingidos de ameixa ───────── */

  --el-1:0 1px 2px rgba(58,26,53,.06), 0 2px 6px rgba(58,26,53,.05);
  --el-2:0 8px 24px -8px rgba(58,26,53,.18);
  --el-3:0 24px 60px -20px rgba(58,26,53,.28);


  /* ── 7. movimento ──────────────────────────────────────────────────── */

  --dur-1:.18s;
  --dur-2:.32s;
  --dur-3:.7s;
  --ease-saida:cubic-bezier(.2,.7,.2,1);


  /* ── 8. layout. medidos em 375px, nao estimados ────────────────────── */

  --env:1160px;
  --env-texto:68ch;
  --topo-h:68px;
  --cta-fixo-h:64px;
}