/*
 * Agenda de Feiras · tokens do design system (KV v1)
 * Fonte única de cores, tipografia, espaço, raios, sombras e foco.
 * Tema só claro. Nenhum azul. Texto sempre grafite; nunca branco sobre amarelo ou laranja.
 * Referência visual: /admin/design-system (só super_admin)
 */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fredoka-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../fonts/nunito-var-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Cores da marca (KV) */
  --cor-amarelo: #FFC401;        /* Amarelo Feira */
  --cor-laranja: #FF7A00;        /* Laranja Agenda */
  --cor-grafite: #1F1A17;        /* Grafite Quente: todo texto */
  --cor-creme: #FFF4DE;
  --cor-offwhite: #FFFAF2;
  --cor-branco: #FFFFFF;
  /* Apoio */
  --cor-amarelo-claro: #FFE7A0;
  --cor-laranja-texto: #A84A00;  /* laranja para texto pequeno (8,3:1 no branco) */
  --cor-cinza: #6B625B;          /* Cinza Quente: texto secundário só em fundo claro (5,5:1 no creme) */
  /* Derivados de interface */
  --cor-amarelo-escuro: #EBB400;
  --cor-laranja-escuro: #E86E00;
  --cor-linha: #EADFCC;          /* divisórias decorativas */
  --cor-borda-campo: #9A8C7C;    /* contorno de campo: 3,3:1 no branco */
  --cor-esqueleto: #F1E7D6;
  --cor-ok: #1E6B3C;
  --cor-ok-fundo: #E6F4E9;
  --cor-ok-vivo: #2BB673;        /* ponto "ao vivo" do selo da home (decorativo) */
  --cor-erro: #9C2B2B;
  --cor-erro-fundo: #FDECEA;

  /* Setores (calendário e mapa): par fundo claro + tom forte, todos quentes ou terrosos, sem azul.
     Texto sobre o fundo é sempre grafite (≥ 11:1). O tom forte é só faixa, ponto e marcador,
     e vem sempre acompanhado do nome do setor (cor nunca é a única pista). */
  --setor-1-fundo: #FFE7A0; --setor-1-forte: #E5AC00;  /* Amarelo Feira */
  --setor-2-fundo: #FFDDBA; --setor-2-forte: #FF7A00;  /* Laranja Agenda */
  --setor-3-fundo: #F8D3C4; --setor-3-forte: #C4532E;  /* Terracota */
  --setor-4-fundo: #FBD6D8; --setor-4-forte: #DC4F5C;  /* Coral */
  --setor-5-fundo: #EFD6E2; --setor-5-forte: #9C3866;  /* Amora */
  --setor-6-fundo: #E8EAC6; --setor-6-forte: #84941A;  /* Oliva */
  --setor-7-fundo: #D8ECD3; --setor-7-forte: #3E8E41;  /* Folha */
  --setor-8-fundo: #EFDFCB; --setor-8-forte: #9A6331;  /* Caramelo */
  --setor-9-fundo: #ECE5DD; --setor-9-forte: #6B625B;  /* Cinza Quente */

  /* Papéis */
  --fundo: var(--cor-offwhite);
  --fundo-alt: var(--cor-creme);
  --superficie: var(--cor-branco);
  --texto: var(--cor-grafite);
  --texto-suave: var(--cor-cinza);
  --link: var(--cor-laranja-texto);

  /* Tipografia */
  --fonte-titulo: "Fredoka", "Nunito", ui-rounded, "Trebuchet MS", sans-serif;
  --fonte-corpo: "Nunito", ui-rounded, "Segoe UI", "Trebuchet MS", sans-serif;
  --peso-corpo: 600;
  --peso-forte: 800;
  --peso-black: 900;
  --peso-titulo: 600;

  --fs-display: clamp(2.5rem, 1.55rem + 4.1vw, 4.5rem);
  --fs-h1: clamp(2.125rem, 1.55rem + 2.5vw, 3.375rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-lg: 1.1875rem;   /* 19px: lead */
  --fs-base: 1.0625rem; /* 17px: corpo */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-xs: 0.8125rem;   /* 13px: etiquetas em caixa alta */

  --lh-titulo: 1.06;
  --lh-corpo: 1.55;
  --tracking-etiqueta: 0.09em;

  /* Espaço (base 4px) */
  --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: 4rem;
  --esp-9: 5.5rem;
  --esp-secao: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Raios */
  --raio-xs: 8px;
  --raio-sm: 12px;
  --raio-md: 18px;
  --raio-lg: 28px;
  --raio-xl: 40px;
  --raio-pilula: 999px;

  /* Sombras quentes (marrom, nunca cinza azulado) */
  --sombra-1: 0 1px 2px rgba(60, 35, 10, 0.08), 0 2px 8px rgba(60, 35, 10, 0.06);
  --sombra-2: 0 10px 30px rgba(60, 35, 10, 0.12);
  --sombra-3: 0 22px 50px rgba(60, 35, 10, 0.18);
  --sombra-solida: 0 5px 0 var(--cor-grafite);

  /* Layout */
  --largura-max: 1200px;
  --largura-texto: 46rem;
  --margem-lateral: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --altura-topo: 76px;

  /* Breakpoints (referência; nas media queries use os valores literais) */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;

  /* Foco e acessibilidade */
  --foco-cor: var(--cor-grafite);
  --foco-largura: 3px;
  --foco-offset: 3px;
  --foco-anel: 0 0 0 var(--foco-offset) var(--cor-branco), 0 0 0 calc(var(--foco-offset) + var(--foco-largura)) var(--cor-grafite);
  --alvo-toque: 44px;

  /* Movimento */
  --duracao: 160ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Aliases das variáveis antigas de app.css (mantidos para as outras branches) */
  --ink: var(--cor-grafite);
  --ink-soft: var(--cor-cinza);
  --paper: var(--cor-offwhite);
  --paper-2: var(--cor-creme);
  --white: var(--cor-branco);
  --yellow: var(--cor-amarelo);
  --yellow-deep: var(--cor-amarelo-escuro);
  --orange: var(--cor-laranja);
  --orange-deep: var(--cor-laranja-escuro);
  --line: var(--cor-linha);
  --ok: var(--cor-ok);
  --ok-bg: var(--cor-ok-fundo);
  --danger: var(--cor-erro);
  --danger-bg: var(--cor-erro-fundo);
  --shadow: var(--sombra-2);
  --radius: var(--raio-lg);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duracao: 0ms; }
}