/* Tema do app: TODAS as cores, fontes, raios de borda e sombras ficam aqui.
   app.css usa só estas variáveis (o teste de tokens falha com cor hex fora deste arquivo).
   Modo ESCURO é o padrão (:root; js/tema.js grava data-theme="dark" na primeira abertura).
   Modo claro, opcional, em [data-theme="light"]: lavanda, nunca branco; a faixa do topo de cada tela continua roxa.
   A cor da barra do navegador (meta theme-color e manifest) repete --theme-color, que não aceita variável.
   Contraste WCAG medido em testes/tokens.test.mjs (texto 4.5:1, texto grande e UI 3:1). */

@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* ---------- Modo escuro (padrão) ---------- */
:root {
  color-scheme: dark;
  --bg: #242038;
  --surface: #3A364B;             /* cartões, campos, opções, topo e abas */
  --surface-2: #2E2A42;           /* caixa do prompt, notas */
  --text: #FFFFFF;
  --text-muted: #D5C8EE;          /* lavanda, não cinza */
  --section-title: #FFD23F;       /* títulos de seção dentro dos blocos escuros */
  --brand: #A783DB;               /* roxo da marca: ícones, seleção (preenchimento), etapa ativa */
  --brand-text: #B794E8;          /* roxo para texto e links */
  --on-brand: #242038;            /* texto sobre o botão roxo (fundo = --brand-text) */
  --selected-bg: #A783DB;         /* opção marcada: card roxo cheio */
  --selected-text: #1E1A2E;
  --highlight-bg: #503C80;        /* card roxo de destaque (passos, item principal) */
  --highlight-text: #FFFFFF;
  --highlight-accent: #FFD23F;
  --action: #047857;              /* verde: só a ação principal */
  --action-hover: #065F46;
  --action-text: #FFFFFF;
  --action-border: #34D399;
  --accent: #FFD23F;              /* amarelo: selos e números pequenos, só no escuro */
  --border: #4D4863;              /* linhas decorativas */
  --control-border: #8C84A6;      /* contorno de campos e opções desmarcadas (UI, 3:1) */
  --focus: #B794E8;
  --error: #FF9B8F;
  --theme-color: #242038;

  /* Faixa de cabeçalho de cada tela (igual nos dois modos) */
  --header-gradient: linear-gradient(135deg, #242038 0%, #6E4BA3 100%);
  --header-text: #FFFFFF;
  --header-muted: #E9E1F7;
  --header-accent: #FFD23F;       /* etapa atual */
  --on-header-accent: #242038;
  --progress-track: #1B1730;
  --progress-fill: linear-gradient(90deg, #B794E8 0%, #34D399 100%);

  /* Ícones em círculos coloridos */
  --icon-1: #A783DB;
  --icon-2: #F472B6;
  --icon-3: #FFD23F;
  --icon-text: #1E1A2E;

  /* Detalhes */
  --contorno-amostra: rgba(255, 255, 255, .35);  /* borda das bolinhas de cor */
  --mock-foto: #6E5A92;                          /* miniaturas dos layouts */
  --mock-vidro: rgba(255, 255, 255, .25);
  --sombra-card: 0 8px 22px rgba(10, 6, 24, .45);

  /* Bônus: destaque que pulsa na aba e no Início */
  --bonus-fundo: linear-gradient(135deg, #FFD23F 0%, #B794E8 100%);
  --bonus-icone: #1E1A2E;
  --bonus-brilho: rgba(255, 210, 63, .6);
  --bonus-reflexo: rgba(255, 255, 255, .8);

  /* Fontes */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Raios de borda */
  --raio-xs: 4px;
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-campo: 12px;
  --raio-opcao: 14px;
  --raio: 16px;
  --raio-pilula: 999px;
  --raio-circulo: 50%;

  /* Sombras */
  --sombra-selecao: 0 0 0 2px var(--selected-bg);

  /* Medidas */
  --toque: 48px;
  --altura-abas: 64px;
}

/* ---------- Modo claro (opcional): lavanda saturada, cards lavanda clara ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #E4DAF3;
  --surface: #F3EDFB;
  --surface-2: #EADFF7;
  --text: #1E1A2E;
  --text-muted: #4A3F66;
  --section-title: #5E3A96;
  --brand: #7346B8;
  --brand-text: #5E3A96;
  --on-brand: #FFFFFF;
  --selected-bg: #7346B8;
  --selected-text: #FFFFFF;
  --highlight-bg: #6E4BA3;
  --highlight-text: #FFFFFF;
  --highlight-accent: #FFFFFF;
  --action: #047857;
  --action-hover: #065F46;
  --action-text: #FFFFFF;
  --action-border: #047857;
  --accent: #6E4700;              /* no claro, âmbar escuro (o amarelo nunca vai sobre fundo claro) */
  --border: #CDBFE6;
  --control-border: #7E73A0;
  --focus: #5E3A96;
  --error: #B42318;
  --theme-color: #242038;
  --icon-1: #7346B8;
  --icon-2: #DB2777;
  --icon-3: #8A5A00;
  --icon-text: #FFFFFF;
  --contorno-amostra: rgba(30, 26, 46, .3);
  --mock-foto: #B9A6D3;
  --mock-vidro: rgba(255, 255, 255, .6);
  --sombra-card: 0 8px 22px rgba(70, 40, 120, .16);
  --bonus-fundo: linear-gradient(135deg, #FFD23F 0%, #A783DB 100%);
  --bonus-icone: #1E1A2E;
  --bonus-brilho: rgba(115, 70, 184, .5);
  --bonus-reflexo: rgba(255, 255, 255, .85);
}