/*
 * TOKENS DE DESIGN — compartilhados pelos dois sites.
 * Para trocar as cores da marca, altere só o bloco "CORES DA MARCA" abaixo.
 */

@font-face {
  font-family: "Epilogue";
  src: url("/assets/fonts/epilogue-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Epilogue";
  src: url("/assets/fonts/epilogue-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Epilogue";
  src: url("/assets/fonts/epilogue-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ===== CORES DA MARCA (ajuste aqui) ===== */
  --cor-acento: #02e78c; /* cor marcante: botões, links, destaques */
  --cor-acento-forte: #5bf5b4; /* acento ao passar o mouse */
  --cor-sobre-acento: #04140d; /* texto em cima do acento */
  --cor-powerbi: #d8f20d; /* etiqueta dos desafios de Power BI */
  --cor-sql: #04cccc; /* etiqueta dos desafios de SQL */
  --cor-final: #bcb3f2; /* etiqueta do desafio final */
  /* ======================================== */

  /* Superfícies e texto (tema escuro) */
  --cor-fundo: #0b0b0c;
  --cor-superficie: #111113;
  --cor-superficie-alta: #18181b;
  --cor-linha: #26262b;
  --cor-linha-forte: #3a3a41;
  --cor-texto: #f5f3ee;
  --cor-texto-suave: #a9a7ae;
  --cor-erro: #ff7b7b;
  --cor-aviso: #f2c94c;

  /* Tipografia */
  --fonte-base: "Epilogue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --texto-2xl: clamp(2.125rem, 1.4rem + 3.6vw, 3.75rem);

  /* Espaçamentos */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;

  /* Formas */
  --raio-sm: 6px;
  --raio-md: 12px;
  --raio-lg: 20px;
  --largura-max: 72rem;
  --foco: 0 0 0 2px var(--cor-fundo), 0 0 0 4px var(--cor-acento);
  --transicao: 160ms ease;
}