/* tokens.css - variaveis do design system
   Tema DARK (aluno: vitrine, player) e o token set do padrao vault */

:root {
  /* Cores (identidade dark DataEvo, Sistema_de_Estilos) */
  --bg: #0d0f12;
  --bg-elev: #14171c;
  --surface: #1a1e24;
  --surface-glass: rgba(26, 30, 36, 0.6);
  --border: #262b33;
  --text: #e8eaed;
  --text-dim: #9aa0a8;
  /* Texto apagado (11 a 12 px: .aula-dica, .material-meta, .dur, datas). O #6b7280 antigo dava 3,46:1 sobre a superficie #1a1e24
     (3,72 sobre #14171c e 3,97 sobre o fundo #0d0f12): abaixo dos 4,5 do AA. O #868d99 da 5,01:1, 5,37:1 e 5,74:1 nas tres, e segue
     abaixo do --text-dim (#9aa0a8, 6,35:1 sobre a superficie), entao a hierarquia dos dois cinzas continua. */
  --text-fraco: #868d99;
  --accent: #FF7500;
  --accent-hover: #ff8c2e;
  --accent-escuro: #CC5C00;
  --accent-soft: rgba(255, 117, 0, 0.12);
  /* borda e brilho na cor da marca: derivados do --accent (nada de rgba de laranja solto nos componentes) */
  --accent-borda: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-brilho: color-mix(in srgb, var(--accent) 13%, transparent);
  /* Letra e icone EM CIMA do accent: quase preto do tema (decisao 7 do dono; 7,13:1 sobre #FF7500, branco daria 2,69:1).
     Toda letra sobre fundo laranja usa este token, nunca #fff. */
  --texto-sobre-accent: #0d0f12;
  /* Texto na cor da marca: no tema escuro o accent puro le bem (sobre a superficie escura); no claro o tema troca por
     #B05000 (5,26:1 sobre branco, 4,61:1 sobre #EEF0F3 e 4,75:1 sobre o suave #FFF1E5). Contorno e icone no claro usam --accent-escuro (#CC5C00). */
  --accent-texto: var(--accent);
  --success: #2ecc71;
  --danger: #e74c3c;
  /* Texto de erro (Fase 8, correcoes): o --danger puro da 4,38:1 sobre a superficie escura #1a1e24 (abaixo dos 4,5 do AA). O #f87171 da 6,05:1
     na superficie, 6,49:1 no #14171c e 6,94:1 no fundo #0d0f12; o tema claro troca por #b91c1c (6,47 sobre branco, 5,67 sobre #EEF0F3). Vermelho em
     TEXTO usa este; o --danger fica pra borda e icone. */
  --danger-texto: #f87171;
  --danger-botao: #c0392b;   /* fundo do botao de acao destrutiva: letra branca 5,44:1 (o --danger puro daria 3,82:1) */
  --texto-sobre-danger: #ffffff;   /* letra do .btn-perigo sobre o --danger-botao (5,44:1) */
  --fundo-video: #000000;          /* moldura do player: o video manda, a cor nao varia com o tema */
  --bolinha-switch: #ffffff;       /* bolinha do switch on/off (.cv-sw), branca nos dois temas */
  /* Botao "Continuar com o Google" (diretrizes de marca do Google, botao claro) e a marca G em quatro cores, que nao se altera: fundo
     branco, borda #747775 e letra #1F1F1F (16,5:1). Iguais nos dois temas da plataforma; hex SO aqui, nunca em template (CV-001). */
  --google-fundo: #ffffff;
  --google-fundo-hover: #f2f2f2;
  --google-borda: #747775;
  --google-texto: #1f1f1f;
  --google-azul: #4285f4;
  --google-verde: #34a853;
  --google-amarelo: #fbbc05;
  --google-vermelho: #ea4335;
  --warning: #f1c40f;
  /* Verde de "ligado" e "carregado" (Padrao_Toggle_OnOff, Padrao_Upload_Arquivo): hex SO aqui (CV-169, CV-175).
     --verde-escuro e o verde de TEXTO: claro no tema escuro do aluno, escuro no tema claro do admin. */
  --verde: #16a34a;
  --verde-suave: rgba(22, 163, 74, 0.12);
  --verde-escuro: #4ade80;
  --vermelho: var(--danger);
  /* Indicadores da Visao geral (Padrao_KPI_Dashboard, .mg-kpi) e faixas de espera da Caixa da equipe: cores de estado
     (verde, ambar, vermelho, cinza) so aqui, nunca em template (CV-001, CV-144). O tema claro do admin troca os suaves
     e os escuros. */
  --verde-claro: #22c55e;
  --verde-borda: rgba(22, 163, 74, 0.35);
  --ambar: #d97706;
  --ambar-suave: rgba(217, 119, 6, 0.14);
  --ambar-escuro: #f59e0b;
  --vermelho-suave: rgba(231, 76, 60, 0.12);
  --vermelho-escuro: #f87171;
  --vermelho-claro: #f87171;
  --vermelho-borda: rgba(231, 76, 60, 0.35);
  --kpi-cinza-a: #475569;
  --kpi-cinza-b: #334155;
  /* Icone de cada grupo do menu na Visao geral (admin/home.html, classe .gv-<grupo>): hex so aqui. Todos passam de 3:1
     sobre o cartao branco (icone e grafico, piso 3:1); o de Conteudo e o accent-escuro (o accent puro daria 2,69:1). */
  --grupo-conteudo: var(--accent-escuro);
  --grupo-comunidade: #db2777;
  --grupo-operacao: #0d9488;
  /* Integracoes: o roxo #7C3AED e EXCLUSIVO da marca de IA (Padrao_Marca_IA, Sempre_Marcar_IA): grupo de menu nao pode ter a mesma cor.
     #3F6212 (verde-oliva) da 7,08:1 sobre branco, 6,55:1 sobre #F5F6F8 e 6,20:1 sobre #EEF0F3, entao serve ate de texto (piso 4,5:1);
     e distinto dos outros grupos (laranja, rosa, verde-agua, azul, ardosia). */
  --grupo-integracoes: #3f6212;
  --grupo-admin: #2563eb;
  --grupo-desenvolvedor: #475569;
  --grupo-padrao: #64748b;

  /* Marca de IA (Padrao_Marca_IA, Sempre_Marcar_IA; CV-137): TODA funcionalidade de IA e roxa e usa ph-sparkle, nunca o --accent. Hex SO aqui.
     Tema escuro (padrao do :root): o roxo de TEXTO e o #C4B5FD (9,06:1 sobre a superficie #1a1e24, 9,73 sobre #14171c e 10,40 sobre o fundo #0d0f12;
     o #7C3AED puro daria 2,94 e nao serve de texto); o icone usa o #A78BFA (6,15:1 sobre a superficie). Os pasteis sao o roxo translucido sobre o
     tema, e o #C4B5FD sobre o suave composto da 8,06:1. O botao e a mesma peca nos dois temas: letra branca sobre #7C3AED da 5,70:1 e sobre o hover
     #6D28D9 da 7,10:1. O desabilitado (#A78BFA) e estado de espera e fica fora da conta de contraste de texto. */
  --roxo: #7C3AED;
  --roxo-escuro: #6D28D9;
  --roxo-claro: #A78BFA;
  --roxo-texto: #C4B5FD;
  --roxo-borda: #7C3AED;
  --roxo-icone: #A78BFA;
  --roxo-pastel-1: rgba(124, 58, 237, 0.08);
  --roxo-pastel-2: rgba(124, 58, 237, 0.16);
  --roxo-suave: rgba(124, 58, 237, 0.16);
  --texto-sobre-roxo: #ffffff;

  /* Tipografia */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;

  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  --raio-2xs: 4px; --raio-xs: 6px; --raio-sm: 8px; --raio: 12px; --raio-lg: 18px; --raio-full: 9999px;
  --sombra-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sombra-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --sombra-popup: 0 20px 50px rgba(0, 0, 0, 0.25);      /* popup centrado e aviso global de espera */
  --sombra-flutuante: 0 4px 12px rgba(0, 0, 0, 0.4);     /* peca pequena por cima de uma arte (o botao da previa do CTA) */
  --sombra-faixa-rodape: 0 -4px 24px rgba(0, 0, 0, 0.2);   /* a faixa escura de acoes em lote que sobe do rodape (os videos do Panda) */
  --sombra-bolinha: 0 1px 3px rgba(0, 0, 0, 0.25);       /* bolinha do switch */
  /* texto em cima de foto ou banner: branco fixo nos dois temas (a arte manda), sempre com sombra pra ler */
  --sobre-imagem: #ffffff;
  --sobre-imagem-suave: rgba(255, 255, 255, 0.85);
  --sombra-sobre-imagem: 0 2px 12px rgba(0, 0, 0, 0.7);
  --sombra-sobre-imagem-leve: 0 1px 8px rgba(0, 0, 0, 0.7);
  /* fundos por tras de modal, popup, aviso de espera e gaveta */
  --overlay: rgba(15, 23, 42, 0.55);
  --overlay-leve: rgba(15, 23, 42, 0.45);
  --overlay-dialog: rgba(0, 0, 0, 0.4);
  --overlay-gaveta: rgba(0, 0, 0, 0.5);
  --vidro-topbar: rgba(13, 15, 18, 0.85);
  /* maquete do admin (upload do banner e previa do botao): a tela do ALUNO desenhada em miniatura, sempre escura nos dois temas */
  --mock-bg: #0d0f12;
  --mock-lateral: #14171c;
  --mock-linha: #262b33;
  --mock-barra: #2a2f37;
  --mock-faixa: #1d222a;
  --mock-card: #1a1e24;
  --mock-moldura: #1f2937;
  --mock-cta: #17110b;
  --blur: blur(12px);
  --transicao: .18s ease;

  --sidebar-width: 248px;
  --topbar-h: 60px;

  /* Vitrine (Fase 8, parte A): escurecimento sobre a arte do billboard e do cadeado (o tom do tema, nunca preto puro)
     e o fade das setas das prateleiras */
  --scrim: rgba(13, 15, 18, 0.72);
  --scrim-forte: rgba(13, 15, 18, 0.94);

  /* Rodape da sidebar (Padrao_Sidebar_Rodape, CV-160): a sombra do botao Inicio SAI DA COR DA MARCA (nada de rgba de laranja fixo) e o
     anel de "pagina atual" e branco translucido sobre o degrade da marca */
  --sombra-accent: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent);
  --sombra-accent-forte: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
  --anel-sobre-accent: rgba(255, 255, 255, 0.4);

  /* Aliases usados pelos padroes claros da vault (mapeados pro dark aqui) */
  --branco: var(--surface);
  --fundo: var(--bg-elev);
  --borda: var(--border);
  --texto: var(--text);
  --texto-secundario: var(--text-dim);
  --texto-suave: var(--text-dim);
  --texto-fraco: var(--text-fraco);
  --cor-primaria: var(--accent);
  --cor-primaria-escura: var(--accent-escuro);
  --cor-primaria-suave: var(--accent-soft);
  --raio-sm: 8px;
}

/* Tema CLARO (admin), padrao das telas internas da vault */
body.tema-claro {
  --bg: #F5F6F8;
  --bg-elev: #EEF0F3;
  --surface: #FFFFFF;
  --border: #E5E7EB;
  --text: #111827;
  --text-dim: #4B5563;
  /* Fase 8 (parte B), contraste do tema claro (WCAG, texto normal pede 4,5:1; conta refeita em Python, LOG fase=8): o --text-fraco antigo
     #9CA3AF dava 2,54:1 sobre branco, 2,35 sobre #F5F6F8 e 2,22 sobre #EEF0F3. O #666C7A da 5,26 / 4,87 / 4,61 nos tres. */
  --text-fraco: #666C7A;
  --danger-texto: #b91c1c;    /* texto de erro no claro: 6,47 sobre branco, 5,98 sobre #F5F6F8, 5,67 sobre #EEF0F3 e 5,91 sobre o suave #fef2f2 */
  --accent-soft: #FFF1E5;
  /* texto na cor da marca sobre fundo claro: #B05000 da 5,26 sobre branco, 4,86 sobre #F5F6F8, 4,61 sobre #EEF0F3 e 4,75 sobre o suave
     #FFF1E5 (o #B45200 da F8a dava 4,43 sobre #EEF0F3; o accent puro daria 2,69) */
  --accent-texto: #B05000;
  --sombra-sm: 0 1px 3px rgba(17, 24, 39, 0.07);
  --sombra: 0 6px 18px rgba(17, 24, 39, 0.10);
  --sombra-lg: 0 16px 40px rgba(17, 24, 39, 0.14);

  --branco: #FFFFFF;
  --fundo: #F5F6F8;
  --borda: #E5E7EB;
  --texto: #111827;
  --texto-secundario: #4B5563;
  --texto-suave: #5C6370;     /* 5,99 sobre branco, 5,54 sobre #F5F6F8, 5,25 sobre #EEF0F3 (o #6B7280 dava 4,47 e 4,23 nos dois ultimos) */
  --texto-fraco: #666C7A;
  --cor-primaria-suave: #FFF1E5;
  --verde-suave: #e6f6ec;
  --verde-escuro: #147C3B;    /* 4,72 sobre o suave #e6f6ec (o #15803d dava 4,48) */
  --ambar-suave: #fef3c7;
  --ambar-escuro: #9B5E07;    /* 4,72 sobre o suave #fef3c7 (o #a16207 dava 4,42) */
  --vermelho-suave: #fef2f2;
  --vermelho-escuro: #b91c1c;
  /* Marca de IA no tema claro (paleta da nota Padrao_Marca_IA). Texto roxo #5B21B6: 8,98:1 sobre branco, 8,31 sobre #F5F6F8, 7,87 sobre
     #EEF0F3, 8,37 sobre o pastel #FAF5FF, 7,57 sobre #EDE9FE e 7,91 sobre o suave #F3EEFF. O #7C3AED (icone e fundo do botao) da 5,70:1 sobre
     branco e 5,02 sobre o suave. O #C4B5FD de borda (1,85:1 sobre branco) e so contorno decorativo do bloco: nenhum texto nem controle depende dele. */
  --roxo-texto: #5B21B6;
  --roxo-borda: #C4B5FD;
  --roxo-icone: #7C3AED;
  --roxo-pastel-1: #FAF5FF;
  --roxo-pastel-2: #EDE9FE;
  --roxo-suave: #F3EEFF;
}