/* =========================================================
   Tokens da Carranza · versão 3 (premium)
   Três camadas: primitivos → semânticos → componentes.
   Regra de uso da paleta:
   - Moldura escura em volta, folha clara por dentro. O conteúdo mora na folha.
   - Vermelho é o único destaque: ação principal, número que importa, item ativo.
     Nunca em blocos grandes, nunca em mais de um botão por área.
   - Cada tipo de conteúdo tem um tom pastel (aula, questões, flashcards, caderno,
     mapa, material). O tom identifica o tipo; não é decoração.
   - Sobre a moldura e sobre blocos de tinta: texto claro e destaque em vermelho vivo.
   ========================================================= */

@font-face { font-family: "Lufga"; src: url("../fontes/LufgaRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lufga"; src: url("../fontes/LufgaMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lufga"; src: url("../fontes/LufgaSemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lufga"; src: url("../fontes/LufgaBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Primitivos: marca (vermelho Carranza, mais vivo) ---------- */
  --marca-50:  #FFEDEE;
  --marca-100: #FFD9DC;
  --marca-200: #FFB1B7;
  --marca-300: #FF8A92;
  --marca-400: #FF4D5A;
  --marca-500: #E8202F;
  --marca-600: #D71E2B;
  --marca-700: #B5121E;
  --marca-800: #8E0E18;
  --marca-900: #5E0A10;

  /* ---------- Primitivos: neutros (grafite levemente frio) ---------- */
  --neutro-0:   #FFFFFF;
  --neutro-25:  #FAFAFB;
  --neutro-50:  #F3F3F5;
  --neutro-100: #EAEBEE;
  --neutro-200: #DEDFE4;
  --neutro-300: #C6C8CF;
  --neutro-400: #9A9DA8;
  --neutro-500: #626672;
  --neutro-600: #5E6270;
  --neutro-700: #3E414A;
  --neutro-800: #26282E;
  --neutro-850: #1B1D22;
  --neutro-900: #16181D;
  --neutro-950: #0D0E11;

  /* ---------- Primitivos: semânticos ---------- */
  --verde-50:  #E3F6EB; --verde-500: #18A05C; --verde-600: #12854B; --verde-700: #0C6337;
  --ambar-50:  #FFF3D6; --ambar-500: #E39400; --ambar-600: #A86A00; --ambar-700: #7A4D00;
  --laranja-50:#FFEBE0; --laranja-500:#E8561A; --laranja-600:#C2440E; --laranja-700:#8F310A;
  --azul-50:   #E5EEFE; --azul-500:  #2F6FEB; --azul-600:  #2459C8; --azul-700:  #1A4295;
  --violeta-50:#EFEAFD; --violeta-600:#6A4BD0;

  /* ---------- Tons por tipo de conteúdo (blocos pastel) ---------- */
  --tom-aula: #ECE7FD;       --tom-aula-texto: #4B3A9A;
  --tom-questoes: #E0EBFE;   --tom-questoes-texto: #1F4FA8;
  --tom-flashcards: #FDF0C4; --tom-flashcards-texto: #7A5500;
  --tom-caderno: #D9F3E5;    --tom-caderno-texto: #136640;
  --tom-mapa: #FCE0E9;       --tom-mapa-texto: #9E2350;
  --tom-material: #FDE6D6;   --tom-material-texto: #8F3E0F;

  /* ---------- Tipografia ---------- */
  --fonte: "Lufga", system-ui, sans-serif;
  --peso-regular: 400; --peso-medio: 500; --peso-semi: 600; --peso-bold: 700;
  --texto-xs: 0.75rem;   /* 12 */
  --texto-sm: 0.8125rem; /* 13 */
  --texto-md: 0.9375rem; /* 15 */
  --texto-lg: 1.0625rem; /* 17 */
  --titulo-sm: 1.25rem;  /* 20 */
  --titulo-md: 1.625rem; /* 26 */
  --titulo-lg: 2.25rem;  /* 36 */
  --titulo-xl: 3.25rem;  /* 52 */
  --numero-xl: 3rem;     /* 48: número protagonista */
  --entrelinha-texto: 1.55;
  --entrelinha-titulo: 1.08;

  /* ---------- Janelas: mesma identidade em modais e gavetas ---------- */
  --janela-padding: 24px; --janela-titulo: 1.375rem;
  --janela-largura: 600px; --janela-largura-lg: 880px;

  /* ---------- Espaço (base 4) ---------- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-20: 80px;

  /* ---------- Raios: família arredondada ---------- */
  --raio-xs: 8px;    /* badges, tags pequenas */
  --raio-sm: 12px;   /* itens de menu, células */
  --raio-md: 16px;   /* blocos internos, áreas de texto */
  --raio-lg: 28px;   /* cartões */
  --raio-xl: 36px;   /* painéis, blocos de tinta, folha */
  --raio-pilula: 999px; /* botões, campos de uma linha, chips */

  /* ---------- Ritmo dos blocos (use sempre estes, nunca um número solto) ----------
     Cartão grande: blocos de tinta, heróis e a área de leitura.
     Cartão: o padrão de toda a plataforma.
     Cartão compacto: indicadores, itens de grade (baralho, troféu, publicação).
     Linha: item clicável dentro de um cartão (atividade, aluno, passo). */
  --esp-cartao-grande: 36px;
  --esp-cartao: 28px;
  --esp-cartao-compacto: 24px;
  --gap-cartoes: 20px;      /* entre cartões vizinhos, na linha e na coluna */
  --gap-secoes: 40px;       /* entre seções com título */
  --esp-linha: 12px 16px 12px 12px;
  --raio-linha: 18px;
  --gap-linhas: 8px;
  --esp-linha-compacta: 8px 12px 8px 8px; /* listas longas: aulas de um módulo, itens do editor */
  --raio-linha-compacta: 16px;
  --esp-lista: 12px;        /* cartão que só contém uma lista de linhas */

  /* ---------- Moldura (folha clara dentro do quadro escuro) ---------- */
  --moldura-espaco: 12px;
  --moldura-raio: 32px;

  /* ---------- Controles ---------- */
  --altura-controle-sm: 36px;
  --altura-controle: 46px;
  --altura-controle-lg: 54px;
  --largura-leitura: 68ch;

  /* ---------- Movimento ---------- */
  --dur-rapida: 120ms; --dur-media: 200ms; --dur-lenta: 320ms;
  --curva: cubic-bezier(.2, .7, .2, 1);

  /* ---------- Camadas ---------- */
  --z-menu: 50; --z-cabecalho: 60; --z-moldura: 70; --z-lateral: 75; --z-drawer: 80; --z-modal: 90; --z-popover: 100; --z-toast: 110;

  color-scheme: light;
}

/* =========================================================
   Semânticos: tema claro (referência)
   ========================================================= */
:root, :root[data-tema="claro"] {
  --moldura: var(--neutro-950);
  --moldura-texto: #B8B9C2;
  --moldura-texto-2: #8B8E99;
  --moldura-hover: rgba(255, 255, 255, .07);
  --moldura-linha: rgba(255, 255, 255, .08);

  --fundo: var(--neutro-50);
  --superficie: var(--neutro-0);
  --superficie-2: var(--neutro-100);
  --superficie-3: var(--neutro-25);
  --superficie-tinta: var(--neutro-950);       /* bloco escuro de destaque */
  --superficie-tinta-2: #1E2026;
  --texto-sobre-tinta: #F5F5F7;
  --texto-sobre-tinta-2: #A9ACB6;

  --texto: var(--neutro-900);
  --texto-2: var(--neutro-600);
  --texto-3: var(--neutro-500);
  --texto-desabilitado: var(--neutro-400);
  --borda: var(--neutro-200);
  --borda-forte: var(--neutro-300);
  --divisor: var(--neutro-100);

  /* Marca */
  --marca: var(--marca-600);
  --marca-hover: var(--marca-700);
  --marca-pressionada: var(--marca-800);
  --marca-suave: var(--marca-50);
  --marca-texto: var(--marca-700);
  --marca-viva: var(--marca-400);   /* vermelho sobre fundos escuros */
  --sobre-marca: #FFFFFF;

  /* Navegação ativa: aba na cor da folha (lateral escura) ou tinta (pílulas) */
  --nav-ativa-fundo: var(--neutro-950);
  --nav-ativa-texto: #FFFFFF;
  --nav-hover: var(--neutro-100);

  /* Estados */
  --sucesso: var(--verde-600);  --sucesso-suave: var(--verde-50);  --sucesso-texto: var(--verde-700);
  --aviso: var(--ambar-500);    --aviso-suave: var(--ambar-50);    --aviso-texto: var(--ambar-700);
  --perigo: var(--laranja-600); --perigo-suave: var(--laranja-50); --perigo-texto: var(--laranja-700);
  --info: var(--azul-600);      --info-suave: var(--azul-50);      --info-texto: var(--azul-700);
  --destaque-estudo: var(--violeta-600); --destaque-estudo-suave: var(--violeta-50);

  /* Foco */
  --foco: 0 0 0 3px var(--superficie), 0 0 0 5px var(--azul-500);

  /* Elevação: cartões sem borda, sombra macia em camadas */
  --sombra-cartao: 0 1px 2px rgba(13, 14, 17, .04), 0 8px 24px -16px rgba(13, 14, 17, .12);
  --sombra-1: 0 1px 2px rgba(13, 14, 17, .06);
  --sombra-2: 0 2px 4px rgba(13, 14, 17, .04), 0 16px 36px -16px rgba(13, 14, 17, .22);
  --sombra-3: 0 30px 70px -24px rgba(13, 14, 17, .38), 0 4px 10px rgba(13, 14, 17, .06);
  --veu: rgba(13, 14, 17, .52);

  /* Dados de estudo */
  --resposta-correta: var(--sucesso);
  --resposta-incorreta: var(--perigo);
  --resposta-anulada: var(--neutro-500);
}

/* =========================================================
   Tema escuro: combinações próprias, não inversão
   ========================================================= */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --moldura: #070809;
  --moldura-texto: #B8B9C2;
  --moldura-texto-2: #8B8E99;
  --moldura-hover: rgba(255, 255, 255, .06);
  --moldura-linha: rgba(255, 255, 255, .07);

  --fundo: #111216;
  --superficie: #1A1C21;
  --superficie-2: #24262D;
  --superficie-3: #16181C;
  --superficie-tinta: #050607;
  --superficie-tinta-2: #1E2026;
  --texto-sobre-tinta: #F5F5F7;
  --texto-sobre-tinta-2: #A9ACB6;

  --texto: #F5F5F7;
  --texto-2: #B8BBC4;
  --texto-3: #9A9DA8;
  --texto-desabilitado: #5E626C;
  --borda: #2C2F36;
  --borda-forte: #42454E;
  --divisor: #22242A;

  --marca: #FF4D5A;
  --marca-hover: #FF6873;
  --marca-pressionada: #E8202F;
  --marca-suave: rgba(255, 77, 90, .14);
  --marca-texto: #FF8A92;
  --marca-viva: #FF4D5A;
  --sobre-marca: #0D0E11;

  --nav-ativa-fundo: #F5F5F7;
  --nav-ativa-texto: #0D0E11;
  --nav-hover: #24262D;

  --tom-aula: rgba(167, 139, 250, .16);      --tom-aula-texto: #C9B8FF;
  --tom-questoes: rgba(110, 160, 242, .16);  --tom-questoes-texto: #9CC0FF;
  --tom-flashcards: rgba(240, 190, 60, .15); --tom-flashcards-texto: #F7D774;
  --tom-caderno: rgba(60, 192, 125, .15);    --tom-caderno-texto: #86E0B0;
  --tom-mapa: rgba(255, 110, 160, .15);      --tom-mapa-texto: #FF9EC0;
  --tom-material: rgba(255, 150, 90, .15);   --tom-material-texto: #FFB98A;

  --sucesso: #3CC07D;  --sucesso-suave: rgba(60, 192, 125, .14);  --sucesso-texto: #7FDDAA;
  --aviso: #F0B23A;    --aviso-suave: rgba(240, 178, 58, .14);    --aviso-texto: #F6CC78;
  --perigo: #F07A45;   --perigo-suave: rgba(240, 122, 69, .15);   --perigo-texto: #F7A784;
  --info: #6EA0F2;     --info-suave: rgba(110, 160, 242, .15);    --info-texto: #A6C4F7;
  --destaque-estudo: #A78BFA; --destaque-estudo-suave: rgba(167, 139, 250, .15);

  --foco: 0 0 0 3px var(--fundo), 0 0 0 5px #6EA0F2;
  --sombra-cartao: 0 0 0 1px rgba(255, 255, 255, .04);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 0 0 1px rgba(255, 255, 255, .05), 0 16px 36px -16px rgba(0, 0, 0, .8);
  --sombra-3: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 70px -20px rgba(0, 0, 0, .85);
  --veu: rgba(0, 0, 0, .64);
}

/* No celular os blocos respiram menos, mas na mesma proporção */
@media (max-width: 768px) {
  :root { --esp-cartao-grande: 24px; --esp-cartao: 20px; --esp-cartao-compacto: 18px; --gap-cartoes: 16px; --gap-secoes: 32px; }
}