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

:root {
  --camada-popover: 45;   /* o popover preso a um botao (o filtro do Rank, dono 23/10): por cima da pagina, abaixo do sino fixo (46) */
  /* Cores (identidade dark DataEvo, Sistema_de_Estilos) */
  /* o PAPEL dos textos legais (dono, 22/10: os termos de uso e a privacidade com fundo branco e letra #0A0A0B, tambem no tema escuro);
     o link e o titulo sobre o papel tem que passar de 4,5:1 nele */
  --papel-legal: #FFFFFF;
  --tinta-legal: #0A0A0B;
  --tinta-legal-suave: #3A3D44;
  --link-legal: #9A4600;
  --borda-legal: #D9DCE1;
  --bg: #0d0f12;
  --bg-elev: #14171c;
  --surface: #1a1e24;
  --surface-glass: rgba(26, 30, 36, 0.6);
  /* o cabecalho da PASTA na lista dos chats da comunidade (dono, 09/10): um cinza neutro translucido, que vale no tema claro e no escuro */
  --pasta-fundo: rgba(127, 127, 127, 0.10);
  --pasta-fundo-forte: rgba(127, 127, 127, 0.16);
  --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;
  /* contorno do numero vazado do TOP N (Fase 18): enfeite, nao texto de leitura; o cinza discreto das capas que o dono desenhava */
  --topn-contorno: #4a505a;
  /* a barra de rolagem da casa (.rolagem-fina, Fase 18): o polegar sai do texto, quase transparente, e acende ao passar o mouse */
  --rolagem-polegar: color-mix(in srgb, var(--text) 16%, transparent);
  --rolagem-polegar-hover: color-mix(in srgb, var(--text) 32%, transparent);
  /* o cadeado do curso sem acesso (Fase 18, pedido do dono): bola chumbo em neumorfismo, que destaca da capa em tons de cinza; o cadeado e
     laranja (--accent). Luz em cima a esquerda, sombra embaixo a direita */
  --cadeado-chumbo: #3b4049;
  --cadeado-chumbo-claro: #4a5059;
  --cadeado-chumbo-escuro: #2a2e35;
  --cadeado-luz: rgba(255, 255, 255, 0.14);
  --cadeado-sombra: rgba(0, 0, 0, 0.6);
  /* o PDF da Ementa (impressao do navegador, Fase 18): papel branco, texto escuro */
  --impressao-fundo: #ffffff;
  --impressao-texto: #111111;
  --impressao-borda: #cccccc;
  --impressao-fraco: #444444;
  /* o certificado (Fase 18): papel claro em qualquer tema, a tinta escura, o dourado da moldura e do trofeu da vitrine */
  --cert-papel: #fffdf8;
  --cert-tinta: #1a1d24;
  --cert-fraco: #5a606b;
  --cert-ouro: #c9a14a;
  --cert-ouro-claro: #e8c877;
  --trofeu-ouro: #f2c14e;
  --trofeu-prata: #c9d1dc;      /* Fase 106: o anel do 2o lugar do podio do rank */
  --trofeu-bronze: #d08a4f;     /* Fase 106: o anel do 3o lugar */
  --diamante: #5ab0ff;          /* Fase 103: o diamante da faixa da trilha (os pontos da pessoa na Area) */
  /* a cor do escudo da insignia (servicos/trilha.CORES_INSIGNIA, dono 21/10): claras ou vivas, que aparecem sobre o fundo escuro do aluno;
     o icone e escuro em todas (--ins-glifo-escuro, acima de 3:1) */
  --ins-pessego: #FFD9B8;
  --ins-damasco: #FFB47A;
  --ins-queimado: #FF9640;
  --ins-laranja: var(--accent);
  --ins-terracota: #F7A285;
  --ins-vermelho: #F2806E;
  --ins-vinho: #F4A9BA;
  --ins-areia: #F1DDB8;
  --ins-dourado: var(--trofeu-ouro);
  --ins-verde: #8FD3AE;
  --ins-petroleo: #7CCFCB;
  --ins-carvao: #8EC5F0;
  --ins-nevoa: #E8EAED;
  --ins-grafite: #C5CAD1;
  --ins-cinza: #9EA5AF;
  --ins-glifo-escuro: var(--texto-sobre-accent);
  --anel-trilho: rgba(255, 255, 255, .16);   /* o anel de progresso do card (Fase 18): o trilho e a sombra do disco */
  --anel-sombra: 0 4px 12px rgba(0, 0, 0, .35);
  --trofeu-sombra: 0 2px 4px rgba(0, 0, 0, .7);   /* o trofeu dourado do card, sozinho sobre a arte */
  --sp-zap: #25D366;                              /* o verde do WhatsApp no Suporte (so o icone do botao) */
  --sp-zap-fundo: rgba(37, 211, 102, .14);
  --sp-zap-hover: #1EBE5B;                        /* o botao verde do WhatsApp (pagina Sem acesso, dono 16/10) */
  --sp-zap-texto: #FFFFFF;                        /* a letra e o logo BRANCOS sobre o verde, como o botao do proprio WhatsApp (decisao do dono, 16/10; 1,98:1, abaixo dos 4,5:1: o texto vai em negrito e grande) */
  --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 */
  /* Fase 99 (dono, 21/10): a capa composta. A linha da altura das barrinhas sobre a previa (branca, com a sombra escura: aparece sobre qualquer
     arte) e o fundo onde a logo da Miscelanea aparece (a logo do pe e clara, sobre o escuro da capa). Iguais nos dois temas. */
  --cc-linha-altura: #ffffff;
  --cc-linha-sombra: rgba(0, 0, 0, 0.75);
  --msc-logo-fundo: #16181c;
  /* 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-ads: #0369a1;        /* dono, 20/10: o azul-ceu do grupo Ads (5,9:1 sobre branco), distinto do azul do Admin */
  --grupo-juridico: #9f1239;   /* Fase 70: o vinho do Juridico (o roxo e so da IA) */
  /* Recompensas (Fase 24: pontos e rank): o dourado do trofeu, escurecido (#A16207 da 4,9:1 sobre branco), distinto do laranja do Conteudo */
  --grupo-recompensas: #a16207;
  --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 */
  /* Fase 18 (decisao do dono, 05/10): Poppins no texto e nos titulos, no lugar de Inter e Sora. O token do titulo continua separado:
     a regra de onde vai a fonte de titulo (Sistema_de_Estilos) segue valendo, so a familia mudou */
  --font: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Poppins", -apple-system, "Segoe UI", sans-serif;
  --font-numero-topn: "Anton", "Poppins", sans-serif;   /* Fase 18: o numero vazado da secao TOP N (a fonte que o dono usava no CursEduca) */

  --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;
  --raio-icone: 11px;   /* o quadradinho do icone do cartao de link da aula (aba Links, 07/10) */
  --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);
  /* o player (Fase 18, 07/10): o veu da proxima aula automatica (o canto direito; no celular, a base), o texto e o trilho em cima dele e o
     veu do 'Voce ainda esta assistindo?' (os valores de antes, so viraram token) */
  --veu-proxima: linear-gradient(to left, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0) 72%);
  --veu-proxima-celular: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
  --sobre-imagem-fraco: rgba(255, 255, 255, 0.75);
  --trilho-sobre-imagem: rgba(255, 255, 255, 0.2);
  --veu-ainda-assistindo: rgba(8, 8, 10, 0.74);
  /* 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;
  /* o modal de VIDRO do marketplace Especialistas (dono, 12/10; o padrao dos popups do aluno, temas/ios-dark.css e neo.css) */
  --mk-vidro-reflexo: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.01));
  --mk-vidro-caixa: rgba(30, 30, 32, 0.55);
  --mk-vidro-borda: rgba(255, 255, 255, 0.10);
  --mk-vidro-sombra: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --mk-vidro-fundo: rgba(0, 0, 0, 0.45);
  --mk-brilho: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 0px), rgba(255, 255, 255, 1) 0%, rgba(255, 182, 115, 0.9) 22%, rgba(255, 117, 0, 0.35) 48%, transparent 72%);
  --mascara-cheia: linear-gradient(black 0 0);
  /* o veu sobre a plataforma esmaecida no fundo das telas de acesso escuras (dono, 23/10): mais escuro nas bordas, menos atras do cartao */
  --acesso-veu: radial-gradient(ellipse 75% 65% at 50% 45%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.82));
}

/* 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;
}