/**
 * AguiaON — design tokens (tema "Dourado premium refinado").
 *
 * Fonte única de cor/elevação/raio para todas as páginas web e o PWA.
 * Claro é o padrão em :root; escuro entra via html.dark (mesma convenção
 * já usada em loja.html/admin.html/portal.html — ver public/js/theme-init.js).
 *
 * Ordem de import: theme.css ANTES de tailwind.config e de qualquer
 * <style> da página, para que as variáveis já existam quando os
 * utilitários/estilos da página as referenciarem.
 */

:root {
  /* Superfícies — escala de cinza neutra (não tingida de dourado).
     Progressão: bg (base, mais escura da escala clara) < raise (cards)
     < elevated (modais/dropdowns, quase branco). */
  --ag-bg: #EEF0F2;
  --ag-bg-raise: #F7F8F9;
  --ag-bg-elevated: #FFFFFF;
  --ag-bg-sunken: #E4E6E9;
  --ag-border: #D5D8DC;
  --ag-border-strong: #C1C5CB;

  /* Texto — cinza neutro de verdade. Só o destaque (seleção/hover/ativo)
     usa --ag-accent; texto secundário nunca depende de estado pra ler bem. */
  --ag-text: #111111;
  --ag-text-muted: #4B4F56;
  --ag-text-faint: #7A7F87;

  /* Acento (marca) — puxado do amarelo da logo (águia dourada) */
  --ag-accent: #C08A14;
  --ag-accent-hover: #A5760E;
  --ag-accent-soft: #F6E4B0;
  --ag-on-accent: #241D0F;

  /* Semântico — nunca usar para a marca, só para estado */
  --ag-success: #227A4E;
  --ag-success-soft: #DAEEE1;
  --ag-warning: #B96E1E;
  --ag-warning-soft: #F4E3CB;
  --ag-info: #2A5FA8;
  --ag-info-soft: #DCE7F5;
  --ag-danger: #B3261E;
  --ag-danger-soft: #F6DAD8;

  /* Elevação — hierarquia FUNDO → SUPERFÍCIE → SUPERFÍCIE ELEVADA.
     No claro a profundidade vem de sombra sutil + a diferença de tom já
     definida acima (bg/raise/elevated); shadow-1 é o cartão comum,
     shadow-2 é só pra quem realmente precisa "flutuar" (modais, dropdowns,
     popovers). */
  --ag-shadow-1: 0 1px 2px rgba(17, 17, 17, 0.05), 0 1px 1px rgba(17, 17, 17, 0.03);
  --ag-shadow-2: 0 8px 24px rgba(17, 17, 17, 0.10), 0 2px 6px rgba(17, 17, 17, 0.05);

  /* Raio */
  --ag-radius-sm: 8px;
  --ag-radius-md: 12px;
  --ag-radius-lg: 18px;

  color-scheme: light;
}

html.dark {
  /* Cinza neutro, escala GitHub/Primer — camadas com contraste real entre
     si: sunken (mais recuado) < bg (base) < raise (cards) < elevated
     (modais/dropdowns) — dá a separação de "coluna x centro" que um
     único tom escuro não dá. */
  --ag-bg: #0D1117;
  --ag-bg-raise: #161B22;
  --ag-bg-elevated: #21262D;
  --ag-bg-sunken: #090C10;
  --ag-border: #30363D;
  --ag-border-strong: #3D444D;

  --ag-text: #E6EDF3;
  --ag-text-muted: #8B949E;
  --ag-text-faint: #6E7681;

  --ag-accent: #F2B93E;
  --ag-accent-hover: #F7C766;
  --ag-accent-soft: #4A3814;
  --ag-on-accent: #1B1508;

  --ag-success: #6FC496;
  --ag-success-soft: #142A1E;
  --ag-warning: #E2A356;
  --ag-warning-soft: #3A2C16;
  --ag-info: #7FAADD;
  --ag-info-soft: #17263A;
  --ag-danger: #E5837B;
  --ag-danger-soft: #3A1917;

  /* No escuro a profundidade vem principalmente da DIFERENÇA DE LUMINOSIDADE
     entre bg/raise/elevated (já calibrada acima) + borda discreta — sombra
     preta sobre fundo escuro quase não se vê e não deve carregar a
     hierarquia sozinha. shadow-1 (cartão) fica quase nulo, de propósito;
     shadow-2 (elevado) é o único que precisa se notar, pra modal/dropdown
     realmente flutuar sobre o conteúdo atrás. */
  --ag-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.16);
  --ag-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);

  color-scheme: dark;
}

/* Aliases de compatibilidade — mapeiam para o token novo, permitindo
   migrar páginas aos poucos sem quebrar o que ainda usa --accent/--bg. */
:root {
  --accent: var(--ag-accent);
  --accent2: var(--ag-accent-hover);
  --bg: var(--ag-bg);
  --bg2: var(--ag-bg-sunken);
  --surface: var(--ag-bg-raise);
  --surface2: var(--ag-bg-sunken);
  --surface3: var(--ag-bg-elevated);
  --muted: var(--ag-text-muted);
}