/* css/tokens.css — Dono: B3 (design system).
 * Custom properties semânticas únicas: cores, tipografia, espaçamento, elevação, temas.
 * Nenhum outro pacote define hex fixo em componente — todos consomem só via var(--...).
 * Fonte: docs/pesquisa/design-system.md §0-1.
 *
 * Tema padrão de abertura por tela (ARQUITETURA.md §0): CLARO no questionário (B2),
 * ESCURO PREMIUM na apresentação de resultado (B3/B4). Ambos os temas compartilham os
 * mesmos tokens semânticos — só o valor muda por [data-theme].
 */

:root {
  /* ===== Marca — hue fixo 243 (azul-violeta), valores remapeados por tema ===== */
  --brand-hue: 243;

  /* ---------- Light theme (questionário — padrão de :root) ---------- */
  --color-bg: #F7F8FB;
  --color-surface-1: #FFFFFF;
  --color-surface-2: #EEF0F6;
  --color-surface-overlay: #FFFFFFF2;
  --color-border: #E2E4EC;

  --color-text-primary: #12131A;
  --color-text-secondary: #565A6E;
  /* Ajustado de #8A8DA0 (contraste 2.88:1 sobre --color-surface-2, abaixo de WCAG AA
   * 4.5:1 — achado da revisão B3) para #666980: mesmo hue/família, luminância menor,
   * 4.73:1 sobre surface-2 e 5.39:1 sobre surface-1. Usado em muito texto secundário
   * do resultado (savings-label, roi-metric__label, barra-dimensao__valor, badges). */
  --color-text-muted: #666980;

  --color-accent: #4338CA;
  --color-accent-hover: #372DB0;
  --color-accent-soft: #EEF0FF;
  --color-on-accent: #FFFFFF; /* texto/ícone sobre fundo --color-accent sólido (badge, segmented control ativo) */

  --color-success: #0F9D58;
  --color-success-soft: #E6F7EE;
  /* Ajustado de #C97A0A (contraste 2.97:1 sobre --color-warning-soft, abaixo de WCAG
   * AA — achado da revisão B3, usado em .premise-field__badge/.roi-nao-compensa) para
   * #8F5306: mesmo hue de âmbar, 5.47:1 sobre warning-soft. */
  --color-warning: #8F5306;
  --color-warning-soft: #FCF0DD;
  --color-critical: #D6334C;
  --color-critical-soft: #FBE7EA;

  --shadow-color: 231 41% 45%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-md: 0 4px 16px hsl(var(--shadow-color) / 0.10);
  --shadow-lg: 0 12px 32px hsl(var(--shadow-color) / 0.14);

  --gradient-aurora: radial-gradient(60% 50% at 20% 0%, #4338CA1A 0%, transparent 60%),
                     radial-gradient(50% 40% at 90% 10%, #7C7FFB14 0%, transparent 60%);

  /* ---------- Tipografia ---------- */
  --font-ui: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --font-numeric: var(--font-ui);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 4rem;

  /* ---------- Espaçamento / raio ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---------- Modo apresentação (reescala global) ---------- */
  --presentation-scale: 1;
}

/* ---------- Dark theme (apresentação de resultado) ---------- */
[data-theme="dark"] {
  --color-bg: #0B0C10;
  --color-surface-1: #15171E;
  --color-surface-2: #1E212B;
  --color-surface-overlay: #262A38F2;
  --color-border: #2A2E3B;

  --color-text-primary: #F0F0F2;
  --color-text-secondary: #B4B7C5;
  /* Ajustado de #7A7E8F (3.98:1 sobre --color-surface-2, abaixo de WCAG AA — achado
   * da revisão B3) para #9498A8: mesmo hue, 5.59:1 sobre surface-2, 6.24:1 sobre
   * surface-1. É o tema de apresentação (dark premium) — o que mais aparece diante
   * do cliente, prioridade alta para legibilidade correta. */
  --color-text-muted: #9498A8;

  --color-accent: #7C7FFB;
  --color-accent-hover: #9A9CFF;
  --color-accent-soft: #7C7FFB26;

  --color-success: #34D399;
  --color-success-soft: #34D39926;
  --color-warning: #FBBF54;
  --color-warning-soft: #FBBF5426;
  --color-critical: #F2637D;
  --color-critical-soft: #F2637D26;

  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 20px 48px rgb(0 0 0 / 0.5);

  --gradient-aurora: radial-gradient(60% 50% at 20% 0%, #4338CA33 0%, transparent 60%),
                     radial-gradient(50% 40% at 90% 10%, #7C7FFB22 0%, transparent 60%);
}

/* Modo apresentação: reescala tipografia global (design-system §1.3, §5.1) */
[data-presentation="on"] {
  --presentation-scale: 1.35;
}

/* ---------- Glassmorphism — uso contido (design-system §1.5) ----------
 * Aplicar só em: header fixo do wizard, modal de confirmação, card flutuante de
 * CTA/contador total na tela de resultado. Nunca em painéis de conteúdo denso.
 */
.glass {
  background: var(--color-surface-overlay);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}