/* =========================================================
   CYS Soccer — Design Tokens (primitivos)
   Camada de fundacao: escalas de cor, tipografia, espacamento,
   raio, sombras e motion. As variaveis SEMANTICAS de tema
   (--bg-surface, --text-primary, etc.) continuam em
   design-system.css; aqui ficam os primitivos que elas consomem.

   DIRECAO "CAMPO E CAL" — por que a paleta mudou de indigo para verde:

   O escudo do CYS (assets/images/logo-mark.svg) e verde campo (#1F8A4C ->
   #0B4D2E), ouro (#E8B93B) e tinta (#0A1F14). A interface era indigo #4f46e5
   com gradiente ate #9333ea. Ou seja: o produto NAO vestia a propria marca.
   #4f46e5 e o indigo padrao do Tailwind e o par indigo->violeta e o gradiente
   mais reproduzido da web — nao era um estilo escolhido, era o que sobra
   quando ninguem escolhe.

   Agora a rampa primaria sai do escudo. O verde e escuro e dessaturado o
   bastante para funcionar como TINTA (cor de cromo, usavel em massa) e nao
   como cor de destaque, que e o que permite pintar a sidebar inteira com ele
   sem cansar a vista.

   Todos os valores abaixo marcados como "medido" passaram por
   `node tools/valida-cor.mjs`, que reprova de verdade — dois valores desta
   leva foram REPROVADOS na primeira rodada e trocados por causa disso.
   ========================================================= */

:root {
  /* ---------- Cor: primaria (verde campo) escala 50-900 ----------
     Os slots continuam com os mesmos numeros da rampa antiga para que todo
     consumidor (`var(--pitch-600)`) siga significando "a primaria da marca"
     sem precisar reaprender a escala. */
  --pitch-50:  #EFF5F1;
  --pitch-100: #DCEAE1;
  --pitch-200: #B9D5C4;
  --pitch-300: #8ABBA0;
  --pitch-400: #4FBF84; /* a acao no tema ESCURO — 7.76:1 sobre #16171d */
  --pitch-500: #1F8A4C; /* verde vivo do escudo */
  --pitch-600: #16693F; /* primaria da marca / acao — 6.72:1 sobre branco */
  --pitch-700: #0B4D2E; /* verde do escudo, tinta de marca */
  --pitch-800: #08351F;
  --pitch-900: #08251A; /* cromo: o fundo da sidebar */

  /* Texto que vai POR CIMA da primaria. Existe porque a primaria troca de
     claridade entre os temas: branco sobre #16693F da 6.72:1, mas branco
     sobre #4FBF84 (a primaria do escuro) reprovaria. Sem este par, todo
     botao primario do tema escuro sairia ilegivel. */
  --on-pitch-light: #ffffff;
  --on-pitch-dark:  #04140B; /* 8.21:1 sobre #4FBF84 */

  /* ---------- Ouro: reservado a dinheiro e conquista ----------
     O ouro do escudo (#E8B93B) da 1.9:1 no branco — nao serve para texto e
     nem para fio fino. Por isso ele se divide em tres papeis medidos:
       --gold-brand: so preenchimento GRANDE (o proprio escudo, selo);
       --gold-rule:  o fio de 3px sob um valor (elemento grafico, 3.84:1);
       --gold-text:  quando o valor precisar mesmo ser escrito em ouro (6.56:1).
     Na primeira rodada da validacao o --gold-rule estava sendo usado como
     texto e REPROVOU em 3.84 contra o minimo de 4.5. Dai a separacao. */
  --gold-brand: #E8B93B;
  --gold-rule:  #A87A22;
  --gold-text:  #7A5716;

  /* ---------- Cor: neutros escala 50-950 ----------
     Puxados ao VERDE, nunca ao azul. Os neutros antigos eram azulados
     (#f8f9fb, #16171d) porque acompanhavam o indigo; um cinza azulado ao lado
     de um verde de marca briga com ele e denuncia que os dois vieram de
     lugares diferentes. Estes tem a mesma inclinacao de matiz da primaria, que
     e o que faz o conjunto parecer escolhido. */
  --neutral-50:  #F5F7F4;
  --neutral-100: #EFF1ED;
  --neutral-200: #E2E6E0;
  --neutral-300: #CDD4CB;
  --neutral-400: #93A098;
  --neutral-500: #67746C;
  --neutral-600: #4A5851;
  --neutral-700: #33403A;
  --neutral-800: #1D2721;
  --neutral-900: #141C17;
  --neutral-950: #0D1310;

  /* ---------- Cor: paleta CATEGORICA (identidade de serie/categoria) ----------

     PRESERVADA INTACTA nesta leva. O raciocinio abaixo e de outro bloco e
     continua valendo palavra por palavra: as tres matizes foram medidas com o
     validador (OKLab x100, protanopia e deuteranopia Machado 2009) e trocar
     qualquer uma exigiria refazer a medicao inteira. A mudanca de marca nao
     toca aqui porque estas cores nao sao a marca — sao dado.

     Por que isto existe: ate o bloco D o sistema tinha UMA rampa mais as cores
     de status. Quem precisava pintar categoria — a Agenda, com 7 tipos de
     evento — pegava emprestado o token de STATUS: "Jogo" saia com --falta (o
     vermelho de ausencia) e "Pelada" com --presente (o verde de presenca). A
     cor afirmava "problema" e "sucesso" sobre coisas que nao sao nem uma nem
     outra. Status volta a ser reservado; identidade passa a ter paleta propria.

     Por que sao TRES e nao sete: no calendario dois eventos quaisquer podem
     encostar dentro da mesma celula de dia, entao vale o teste de TODOS OS
     PARES, o mais duro. Medido:
       - 7 cores: reprova feio — verde x laranja dE 3.2 sob protanopia, e
         magenta x laranja 12.9 ate com visao normal (piso 15);
       - 4 cores: passa no claro e reprova no escuro (violeta x azul dE 1.9);
       - 3 cores: passa nos dois modos — pior par CVD 9.2 claro / 9.4 escuro
         (alvo 8), visao normal 24.0 claro / 20.9 escuro (piso 15).
     Nenhuma ordenacao de 7 passa: com todos os pares em jogo a lista nao
     depende mais da ordem. Entao a cor carrega a FAMILIA (tres) e o ICONE
     carrega o tipo exato — que e a saida que o proprio metodo prescreve
     (dobrar o excedente em "outros"), e nao um jeitinho.

     No claro, o slot 3 fica em 2.82:1 contra o branco (abaixo de 3:1). Isso
     obriga um canal de alivio, e ele existe: todo evento mostra o titulo
     escrito. Cor nunca e o unico canal aqui.

     LIMITE CONHECIDO, medido e aceito: estas matizes ficam PERTO das de status
     (no escuro, serie-2 x --atrasado da dE 3.3; serie-3 x --presente, 5.5).
     Nao ha como afastar: o espaco de cor utilizavel entre a banda de claridade
     e o piso de croma nao comporta 3 series + 5 status todos distantes entre
     si. A saida — que e a mesma que o metodo prescreve — nao e trocar a matiz,
     e sim garantir que ela nunca decida sozinha: todo item da agenda leva
     icone e texto, e todo badge de status leva a palavra escrita. Se algum dia
     uma tela puser serie e status lado a lado SEM texto, o problema esta la, e
     nao aqui.

     Os `-rgb` existem para tinta translucida (`rgba(var(--serie-1-rgb), .12)`),
     que e como este projeto ja faz fundo tonal no escuro. */
  --serie-1: #2a78d6;  --serie-1-rgb:  42, 120, 214;  /* rotina   */
  --serie-2: #eb6834;  --serie-2-rgb: 235, 104,  52;  /* competicao */
  --serie-3: #1baf7a;  --serie-3-rgb:  27, 175, 122;  /* aluguel  */
  /* Cinza para "outros": neutro NAO e um slot categorico — e a ausencia de
     categoria, e por isso nao entra na validacao nem disputa hue com ninguem. */
  --serie-neutra: #67746C;  --serie-neutra-rgb: 103, 116, 108;

  /* ---------- Cor: rampa ORDINAL (a ordem faz parte do dado) ----------

     Faixa etaria e faixa de tempo nao sao identidades intercambiaveis: Sub-9,
     Sub-11, Sub-13 tem ordem, e trocar duas muda o sentido. Isso pede UMA
     matiz em degraus de claridade, para a ordem aparecer na propria cor.

     Quatro degraus e o teto medido desta rampa; acima de quatro categorias, as
     menores se juntam em "Outros" (cinza).

     A rampa INVERTE no escuro (ver design-system.css): no claro ela vai do
     claro ao escuro; no fundo escuro, do escuro ao claro. E o mesmo dado — o
     que muda e de que lado fica o "quase invisivel".

     REVALIDADA nesta leva, e nao apenas repintada de verde. A medicao
     (`node tools/valida-cor.mjs`) exige monotonia, degrau dL >= 0.06 e extremo
     >= 2:1 contra a superficie. Medido agora:
       claro  L 0.750 / 0.634 / 0.515 / 0.372  — degraus 0.115, 0.119, 0.143
              extremo mais fraco 2.17:1 contra o branco;
       escuro L 0.482 / 0.617 / 0.758 / 0.853  — degraus 0.135, 0.141, 0.095
              extremo mais fraco 2.92:1 contra #16171d.
     O primeiro candidato do tema escuro (#0B4D2E) REPROVOU com 1.80:1 e foi
     substituido por #17703F. Registrado aqui porque a proxima pessoa que
     quiser "so escurecer um tom" precisa saber que existe um piso. */
  --ord-1: #8ABBA0;  --ord-2: #4A9E71;  --ord-3: #1F7A4C;  --ord-4: #0B4D2E;

  /* ---------- Cor: semanticas (status de presenca = identidade viva) ----------
     PRESERVADAS. Status continua reservado a status.

     Nota sobre a convivencia com a marca agora que a marca tambem e verde:
     --presente (#16a34a) e a primaria (#16693F) ficam a dE 17.9 em OKLab, o
     que e distancia de sobra para nao se confundirem. Mas a garantia real nao
     e a matiz, e sim o TRATAMENTO, que os componentes impoem: a marca so
     aparece em massa solida (botao, sidebar, avatar) e o status so aparece em
     chip tingido com ponto e a palavra escrita. Massas diferentes, funcoes
     diferentes. */
  --presente:    #16a34a;  --presente-soft:    #ecfdf3;  --presente-ring:    rgba(22,163,74,0.35);
  --falta:       #dc2626;  --falta-soft:       #fef2f2;  --falta-ring:       rgba(220,38,38,0.35);
  --justificada: #d97706;  --justificada-soft: #fffbeb;  --justificada-ring: rgba(217,119,6,0.35);
  --atrasado:    #ea580c;  --atrasado-soft:    #fff1e6;  --atrasado-ring:    rgba(234,88,12,0.35);
  --info:        #0891b2;  --info-soft:        #ecfeff;

  /* ---------- Tipografia ----------
     UMA familia so. A Space Grotesk saiu: num app de 40 telas de dados a fonte
     display aparece em uns 3% dos pixels, custava 121 KB em 6 arquivos woff2 e
     era justamente ela o sinal "futurista" que a leva veio remover. A
     hierarquia passa a vir de peso, tamanho e tracking — que e como Stripe e
     Linear de fato resolvem — e os numeros ganham `tnum` de verdade via
     `.num-display` (ver design-system.css).

     Nao existe mais `--font-sans`. Se um dia entrar uma face condensada so
     para numero de placar, ela volta como token PROPRIO e com nome honesto. */
  /* Leva "layout premium" (2026-10-01): a familia passou a ser a Plus Jakarta
     Sans, geometrica e amigavel como as referencias aprovadas pelo dono. Continua
     UMA familia so — a regra acima vale igual. A pagina publica congela a Inter
     no topo de publica.css (a vitrine ficou fora da leva). */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --leading-tight: 1.15;
  --leading-normal: 1.5;

  /* Rotulo de sumula: o micro-texto em caixa alta que nomeia um numero.
     Centralizado aqui porque virou um padrao repetido (banda de indicadores,
     cabecalho de tabela, titulo de grupo da sidebar) e porque caixa alta SEM
     tracking extra fica ilegivel em 10-11px. */
  /* Leva "layout premium": o rotulo deixou a CAIXA ALTA de sumula e virou caixa
     de sentenca, 13px, na cor secundaria — como nas referencias. Os tokens
     existem para a pagina publica poder congelar o rotulo antigo (publica.css). */
  --label-size: 0.8125rem;   /* 13 */
  --label-tracking: 0;
  --label-transform: none;
  --label-weight: 500;

  /* Escala de titulo da leva "layout premium". */
  --title-page: 1.5rem;     /* 24 — titulo da tela, no cabecalho */
  --title-hero: 1.75rem;    /* 28 — saudacao do Dashboard */
  --title-card: 1rem;       /* 16 — titulo de cartao */

  /* ---------- Espacamento (escala 4px) ---------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* ---------- Raio ----------
     A escala inteira encolheu. O topo era 28px, que e raio de app de consumo
     aplicado a tela de planilha: junto com a sombra colorida e a mola, dava ao
     trabalho um tom de brinquedo. Uma ferramenta de gestao usa canto curto.
     --radius-full continua existindo, mas agora so para o que e mesmo redondo
     (avatar, ponto de status), nunca para pilula de rotulo. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Raio PROGRESSIVO (leva "layout premium", liberado pelo dono em 2026-10-01):
     o conteiner sempre tem raio maior que o conteudo. Revoga o teto de 12px da
     leva Campo e Cal — a pedido do dono, que quis o nivel das referencias. */
  --radius-control: 10px;   /* botao, campo, select */
  --radius-card: 16px;      /* cartao, painel, tabela */
  --radius-panel: 20px;     /* modal, folha do celular, popup */

  /* Ritmo da pagina (grade de 8px). O celular redefine abaixo. */
  --page-pad: 2rem;         /* 32 */
  --gap-cards: 1.5rem;      /* 24 */
  --card-pad: 1.5rem;       /* 24 */

  /* ---------- Sombras (suaves, em camadas, NEUTRAS) ----------
     Retintadas de rgba(15,23,42) — um azul-ardosia herdado do indigo — para a
     tinta do escudo. E some a --shadow-brand: sombra colorida e luz que nao
     existe; ferramenta seria projeta sombra neutra, ou nenhuma.
     A separacao de superficie agora e feita por FIO de 1px, e a sombra fica
     reservada ao que de fato flutua (modal, dropdown, sheet). */
  --shadow-xs: 0 1px 2px rgba(10, 31, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 31, 20, 0.04), 0 1px 3px rgba(10, 31, 20, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 31, 20, 0.06), 0 2px 4px rgba(10, 31, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 31, 20, 0.10), 0 4px 8px rgba(10, 31, 20, 0.04);
  --shadow-xl: 0 24px 56px rgba(10, 31, 20, 0.16), 0 8px 16px rgba(10, 31, 20, 0.06);
  --shadow-float: 0 4px 8px -2px rgba(10, 31, 20, 0.06), 0 18px 36px -8px rgba(10, 31, 20, 0.16);

  /* Cartao da leva "layout premium": sem borda no claro, separado do fundo por
     contraste e por uma sombra difusa quase invisivel (luz ambiente, nao
     objeto flutuando). No escuro sombra nao le — ali volta o fio (ver abaixo). */
  --shadow-card: 0 1px 2px rgba(10, 31, 20, 0.04), 0 8px 24px rgba(10, 31, 20, 0.045);
  --shadow-card-hover: 0 2px 4px rgba(10, 31, 20, 0.05), 0 14px 32px rgba(10, 31, 20, 0.08);
  --card-border: transparent;

  /* Lavagem do topo do app no celular (leva "layout premium"): um dos DOIS
     unicos usos de gradiente liberados pelo dono — o outro e a area do
     grafico. Verde claro do escudo esmaecendo para o fundo da pagina. */
  --wash-top: linear-gradient(180deg, var(--pitch-100) 0%, var(--bg-body) 100%);

  /* ---------- Motion ----------
     --ease-out saiu junto com o raio grande: a mola (overshoot em
     cubic-bezier(0.34, 1.56, 0.64, 1)) e gestual de app de consumo. Quem a
     usava passou para --ease-out. */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Sombras mais densas no dark, senao os cards "somem" no fundo escuro */
:root[data-theme='dark'],
[data-theme='dark'] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 20px 40px -8px rgba(0, 0, 0, 0.6);
  --shadow-card: none;
  --shadow-card-hover: none;
  --card-border: var(--border-color);
  /* No escuro a lavagem e tinta translucida da primaria clara — o verde claro
     do tema claro viraria uma faixa brilhante no topo. */
  --wash-top: linear-gradient(180deg, rgba(79, 191, 132, 0.12) 0%, var(--bg-body) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --shadow-card: none;
    --shadow-card-hover: none;
    --card-border: var(--border-color);
    --wash-top: linear-gradient(180deg, rgba(79, 191, 132, 0.12) 0%, var(--bg-body) 100%);
  }
}

/* Celular: metade do respiro (16px de pagina, 12px entre cartoes). */
@media (max-width: 991.98px) {
  :root {
    --page-pad: 1rem;
    --gap-cards: 0.75rem;
    --card-pad: 1rem;
  }
}

/* Acessibilidade: respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}