/* ==========================================================================
   ESCOLA CONEXÃO — TOKENS
   Fonte da verdade da identidade visual. Todo o resto (site, ferramentas
   internas, relatórios) deve consumir estas variáveis, nunca hex solto.

   As duas cores da marca saíram do logo oficial (site/assets/img/logo/logo.svg):
     roxo      #5A2A86
     turquesa  #1CBFC2
   As escalas foram geradas a partir delas e todos os pares de texto/fundo
   listados aqui foram medidos e passam em WCAG AA (4.5:1).
   ========================================================================== */

/* Mesma origem que o site já usa em site/assets/css/main.css. Depende de rede:
   para a ferramenta local funcionar bem offline, o passo seguinte é baixar o
   .woff2 do Quicksand para design-system/fonts/ e trocar isto por @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400..700&display=swap');

:root {
  /* ---------- Escala roxo — a cor de trabalho da marca ---------- */
  --cx-roxo-50:  #F6F4F9;
  --cx-roxo-100: #EBE5F0;
  --cx-roxo-200: #D7C6E6;
  --cx-roxo-300: #BE9EDC;
  --cx-roxo-400: #A06BD1;
  --cx-roxo-500: #5A2A86;  /* logo */
  --cx-roxo-600: #5E2C8C;
  --cx-roxo-700: #49226D;
  --cx-roxo-800: #371A52;
  --cx-roxo-900: #27123A;
  --cx-roxo-950: #170B23;

  /* ---------- Escala turquesa — a cor de respiro ----------
     Atenção: turquesa-500 tem só 2.26:1 sobre branco. Serve para preencher
     forma (ícone, faixa, ilustração), nunca para texto nem para botão sólido
     com letra branca. Precisando de turquesa legível, use 700 pra baixo. */
  --cx-turquesa-50:  #F2FAFA;
  --cx-turquesa-100: #E2F3F3;
  --cx-turquesa-200: #BFECED;
  --cx-turquesa-300: #90E8E9;
  --cx-turquesa-400: #56E4E7;
  --cx-turquesa-500: #1CBFC2;  /* logo */
  --cx-turquesa-600: #179EA0;
  --cx-turquesa-700: #127B7D;  /* 5.05:1 sobre branco — o mais claro que passa em AA */
  --cx-turquesa-800: #0E5C5E;
  --cx-turquesa-900: #0A4243;
  --cx-turquesa-950: #062728;

  /* ---------- Neutros ---------- */
  --cx-neutro-0:   #FFFFFF;
  --cx-neutro-50:  #FAFAFB;
  --cx-neutro-100: #F1F1F4;
  --cx-neutro-200: #E3E2E8;
  --cx-neutro-300: #CBC9D3;
  --cx-neutro-600: #5F5A70;
  --cx-neutro-800: #2B2440;
  --cx-neutro-900: #1A1526;

  /* ---------- Papéis semânticos ----------
     É por aqui que os componentes devem falar. Trocar a marca um dia = mexer
     só nesta seção. */
  --cx-acao:            var(--cx-roxo-500);   /* botão principal, link, foco   9.95:1 sobre branco */
  --cx-acao-hover:      var(--cx-roxo-700);
  --cx-acao-suave:      var(--cx-roxo-50);    /* fundo de estado selecionado */
  --cx-destaque:        var(--cx-turquesa-500); /* decorativo: forma, ícone, faixa */
  --cx-destaque-forte:  var(--cx-turquesa-700); /* quando o turquesa precisa ser lido */

  --cx-fundo:           var(--cx-neutro-0);
  --cx-fundo-alt:       var(--cx-neutro-50);
  --cx-superficie:      var(--cx-neutro-0);
  --cx-borda:           var(--cx-neutro-200);
  --cx-borda-forte:     var(--cx-neutro-300);

  --cx-texto:           var(--cx-neutro-800);  /* 14.69:1 */
  --cx-texto-suave:     var(--cx-neutro-600);  /*  6.60:1 */
  --cx-texto-invertido: var(--cx-neutro-0);

  /* ---------- Estados financeiros ----------
     Espelham a coluna Status de Mensalidades. Cada par texto/fundo passa AA. */
  --cx-pago:            #0E7A4F;  --cx-pago-fundo:     #E6F5EE;
  --cx-atrasado:        #B4232B;  --cx-atrasado-fundo: #FCEBEC;
  --cx-parcial:         #8A5A00;  --cx-parcial-fundo:  #FDF3E0;
  --cx-pendente:        #4F4F63;  --cx-pendente-fundo: #F1F1F4;

  /* ---------- Tipografia ----------
     Quicksand é o que o site já usa: geométrica arredondada, cara de escola
     infantil sem ser infantilizada. Pangolin é manuscrita — só para um
     detalhe ocasional, nunca para texto corrido nem para dado. */
  --cx-fonte:         'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --cx-fonte-acento:  'Pangolin', var(--cx-fonte);
  --cx-fonte-mono:    ui-monospace, 'SF Mono', Menlo, monospace; /* valores em R$, tabelas */

  --cx-txt-xs:   0.75rem;   /* 12px — legenda, rótulo de tabela */
  --cx-txt-sm:   0.875rem;  /* 14px */
  --cx-txt-base: 1rem;      /* 16px — corpo */
  --cx-txt-lg:   1.125rem;  /* 18px */
  --cx-txt-xl:   1.5rem;    /* 24px — título de seção */
  --cx-txt-2xl:  2rem;      /* 32px */
  --cx-txt-3xl:  2.75rem;   /* 44px — hero */

  --cx-peso-normal: 500;    /* Quicksand pede um passo a mais que o normal */
  --cx-peso-medio:  600;
  --cx-peso-forte:  700;

  --cx-linha-apertada: 1.2;
  --cx-linha-normal:   1.6;

  /* ---------- Espaçamento — escala de 4px ---------- */
  --cx-esp-1:  0.25rem;
  --cx-esp-2:  0.5rem;
  --cx-esp-3:  0.75rem;
  --cx-esp-4:  1rem;
  --cx-esp-6:  1.5rem;
  --cx-esp-8:  2rem;
  --cx-esp-12: 3rem;
  --cx-esp-16: 4rem;

  /* ---------- Forma ----------
     O logo é feito de círculos e traços de ponta redonda; os raios seguem
     essa deixa em vez de cantos vivos. */
  --cx-raio-sm:   6px;
  --cx-raio-md:   12px;
  --cx-raio-lg:   20px;
  --cx-raio-full: 999px;

  --cx-sombra-sm: 0 1px 2px rgba(39, 18, 58, 0.06);
  --cx-sombra-md: 0 4px 16px rgba(39, 18, 58, 0.08);
  --cx-sombra-lg: 0 12px 32px rgba(39, 18, 58, 0.12);

  /* ---------- Foco — acessibilidade, não decoração ---------- */
  --cx-foco: 0 0 0 3px var(--cx-turquesa-300), 0 0 0 5px var(--cx-roxo-500);
}