/* ==========================================================================
   JJC AI - Design tokens
   --------------------------------------------------------------------------
   ESTE E O UNICO ARQUIVO COM VALORES DE COR, FONTE E ESPACAMENTO.
   Nenhum template ou relatorio usa valor literal - sempre var(--token).

   Valores aplicados a partir do design system oficial da The Jiu-Jitsu
   Company (Claude Design System, project/tokens.json v3). Cores, tipografia,
   espacamento e raio sao os do guia de marca - nao sao mais placeholders.

   Tema padrao: CLARO (Off White + azul-petroleo).
   A escala escura completa esta no bloco data-tema="escuro" no fim.
   ========================================================================== */

:root {
  /* Superficies - exatas do guia (Off White, branco, Light Gray) */
  --cor-fundo:          #FAFAFA;  /* surface */
  --cor-superficie:     #FFFFFF;  /* surface-raised */
  --cor-superficie-alt: #E5E5E5;  /* surface-sunken */
  --cor-borda:          #EDEDED;  /* border */
  --cor-borda-forte:    #E5E5E5;  /* border-strong */

  /* Texto - Black e Charcoal exatos do guia */
  --cor-texto:          #0B0B0B;  /* ink */
  --cor-texto-suave:    #2D2D2D;  /* ink-muted */
  --cor-texto-fraco:    #8C8C88;  /* ink-faint - so >=18px ou decorativo */

  /* Acento - azul-petroleo e suas variacoes */
  --cor-acento:         #075A66;  /* accent */
  --cor-acento-forte:   #034550;  /* accent-strong - hover/pressed */
  --cor-acento-suave:   #DCEFF1;  /* accent-tint - fundo de tag ativa */
  --cor-sobre-acento:   #FFFFFF;  /* on-accent */
  --cor-sobre-tint:     #034550;  /* on-accent-tint */
  --cor-acento-degrade: linear-gradient(135deg, #087080 0%, #07364F 100%);
  --cor-acento-degrade-forte: linear-gradient(135deg, #075764 0%, #032735 100%);

  /* Acento aplicado a TEXTO. No claro e o proprio accent (10.2:1);
     o tema escuro redefine, porque la o accent reprova em texto. */
  --cor-acento-texto:   #075A66;

  /* --------------------------------------------------------------------
     Semantica de evento: concluida x tentativa.
     O design system deixou sucesso/erro em aberto, com a regra explicita
     de resolver a partir do azul-petroleo + ink, nao de uma cor nova.
     Decisao aplicada: concluida = azul-petroleo solido (peso da marca);
     tentativa = contorno em ink-muted, sem preenchimento. Sem verde,
     sem ambar, sem cor fora da paleta.
     -------------------------------------------------------------------- */
  --cor-concluido:      var(--cor-acento);
  --cor-tentativa:      var(--cor-texto-suave);
  --cor-neutra:         #8C8C88;

  /* Atletas: dois pesos do mesmo acento, nao duas cores concorrentes.
     Atleta 1 = azul-petroleo cheio; atleta 2 = ink, o contraponto neutro. */
  --cor-atleta-1:       #075A66;
  --cor-atleta-2:       #2D2D2D;

  /* Tipografia - Montserrat (display) + Inter (texto), do guia.
     Sem arquivo vendorizado e sem CDN: o relatorio precisa abrir offline,
     entao a pilha cai em system-ui quando a fonte nao esta instalada. */
  --fonte-titulo:       Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-corpo:        Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-mono:         ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  --texto-xs:   0.75rem;    /* caption / stat-label */
  --texto-sm:   0.875rem;   /* body-sm */
  --texto-base: 1rem;       /* body 16px */
  --texto-lg:   1.25rem;    /* subheading */
  --texto-xl:   1.75rem;    /* heading */
  --texto-2xl:  2.5rem;     /* display-lg 40px */

  /* Espacamento - escala de 6 passos do guia (4 a 48px), sem
     passos intermediarios inventados. */
  --esp-1: 0.25rem;  /* space-xs  4px */
  --esp-2: 0.5rem;   /* space-s   8px */
  --esp-3: 0.75rem;  /* derivado para densidade de tabela */
  --esp-4: 1rem;     /* space-m  16px */
  --esp-6: 1.5rem;   /* space-l  24px */
  --esp-8: 2rem;     /* space-xl 32px */
  --esp-12: 3rem;    /* space-2xl 48px */

  /* Formas - no guia, botao e tag sao SEMPRE pill total. */
  --raio-sm: 4px;      /* radius-sm */
  --raio:    8px;      /* radius-md - inputs */
  --raio-lg: 16px;     /* radius-lg - cards */
  --raio-pill: 9999px; /* radius-full - selos, tags, badges */
  --largura-max: 880px;
}

/* Tema escuro - escala dark completa do design system.
   Disponivel via data-tema="escuro"; nao e o padrao. */
:root[data-tema="escuro"] {
  --cor-fundo:          #0B0B0B;
  --cor-superficie:     #1A1A1A;
  --cor-superficie-alt: #141414;
  --cor-borda:          #232323;
  --cor-borda-forte:    #2D2D2D;

  --cor-texto:          #FAFAFA;
  --cor-texto-suave:    #C7C7C7;
  --cor-texto-fraco:    #7A7A76;

  --cor-acento:         #16808B;
  --cor-acento-forte:   #29A0AA;
  --cor-acento-suave:   #102D32;
  --cor-sobre-acento:   #FFFFFF;
  --cor-sobre-tint:     #DCEFF1;
  --cor-acento-degrade: linear-gradient(135deg, #147887 0%, #103750 100%);
  --cor-acento-degrade-forte: linear-gradient(135deg, #167987 0%, #0A4961 100%);

  /* Variacao clara para texto e links no tema escuro. */
  --cor-acento-texto:   #61C7CF;

  --cor-neutra:         #7A7A76;
  --cor-atleta-1:       #16808B;
  --cor-atleta-2:       #C7C7C7;
}