/* App do Dealer — design tokens (identidade "Variação 1").
   Fonte da verdade: IDENTIDADE_VISUAL.md. Nenhuma tela usa cor "solta":
   tudo passa por estas variáveis.

   Camadas:
   1. Paleta da plataforma (fixa).
   2. Tema claro (padrão) e tema escuro ([data-theme="dark"] no <html>).
   3. Acento da marca (--brand*): App do Dealer por padrão; no ambiente do
      cliente é sobrescrito pelo <style> gerado em templates/_brand_vars.html. */

:root {
  /* ---- 1. Paleta da plataforma ---- */
  --teal: #10BDA7;            /* principal (Variação 1) */
  --teal-600: #0C8476;        /* tom de ação: contraste AA com texto branco */
  --teal-700: #0A6E63;
  --navy: #0B1F3B;            /* secundária */
  --mint: #A7F3E0;            /* destaque */
  --blue: #3B82F6;            /* suporte */

  --n900: #0F172A;
  --n700: #334155;
  --n500: #64748B;
  --n300: #CBD5E1;
  --n200: #E2E8F0;
  --n100: #F1F5F9;
  --n50:  #F8FAFC;
  --white: #FFFFFF;

  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --info:    #0EA5E9;

  /* ---- 2. Tema claro ---- */
  color-scheme: light;
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;        /* cabeçalho de tabela, áreas recuadas */
  --surface-3: #F1F5F9;        /* hover, chips */
  --ink: #0F172A;
  --ink-2: #334155;
  --muted: #64748B;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --input-bg: #FFFFFF;
  --overlay: rgba(15, 23, 42, .45);

  --sidebar-bg: #FFFFFF;
  --sidebar-ink: #334155;
  --sidebar-muted: #94A3B8;
  --sidebar-line: #E2E8F0;

  /* texto/fundo dos estados (badges, alertas) — legíveis no tema */
  --success-ink: #15803D;  --success-soft: #E9F9EF;  --success-line: #BBF0CE;
  --warning-ink: #B45309;  --warning-soft: #FEF4E2;  --warning-line: #FBDDA7;
  --danger-ink:  #B91C1C;  --danger-soft:  #FDEDED;  --danger-line:  #F8C9C9;
  --info-ink:    #0369A1;  --info-soft:    #E7F5FD;  --info-line:    #B9E3F9;
  --neutral-ink: #475569;  --neutral-soft: #F1F5F9;

  /* ---- 3. Acento da marca (padrão App do Dealer) ---- */
  --brand: #0C8476;            /* ações (contraste AA com texto branco) */
  --brand-strong: #0A6E63;     /* hover */
  --brand-accent: #10BDA7;     /* destaques, ícones ativos, foco */
  --brand-contrast: #FFFFFF;   /* texto sobre --brand */
  --brand-deep: #0B1F3B;       /* superfícies escuras de marca (login, hero) */
  --brand-deep-contrast: #FFFFFF;
  --brand-fg: var(--brand);    /* texto/ícone na cor da marca sobre o fundo do tema */
  --brand-soft: color-mix(in srgb, var(--brand-accent) 12%, var(--surface));
  --brand-softer: color-mix(in srgb, var(--brand-accent) 6%, var(--surface));
  --focus: color-mix(in srgb, var(--brand-accent) 35%, transparent);

  /* ---- forma ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .03);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .14);

  /* ---- tipografia (compacta) ---- */
  --font-title: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 10.5px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;     /* texto geral */
  --fs-lg: 15px;     /* título de seção */
  --fs-xl: 20px;     /* título da página */
  --fs-kpi: 22px;    /* indicadores */

  /* ---- medidas do shell ---- */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 52px;
  --control-h: 32px;

  /* aliases legados (templates antigos / inline) */
  --card: var(--surface);
  --erro: var(--danger);
  --sucesso: var(--success);
  --neutro-700: var(--ink-2);
  --n200-line: var(--line);
  --branco: var(--surface);
}

/* ---------------- Tema escuro ---------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220;
  --surface: #111827;
  --surface-2: #0E1626;
  --surface-3: #172033;
  --ink: #F8FAFC;
  --ink-2: #CBD5E1;
  --muted: #94A3B8;
  --line: #253247;
  --line-strong: #33445E;
  --input-bg: #0E1626;
  --overlay: rgba(2, 6, 15, .6);

  --sidebar-bg: #0E1626;
  --sidebar-ink: #CBD5E1;
  --sidebar-muted: #64748B;
  --sidebar-line: #1E293B;

  --success-ink: #4ADE80;  --success-soft: #11291E;  --success-line: #1C4A33;
  --warning-ink: #FBBF24;  --warning-soft: #2E2312;  --warning-line: #584217;
  --danger-ink:  #F87171;  --danger-soft:  #2D1416;  --danger-line:  #5B2328;
  --info-ink:    #38BDF8;  --info-soft:    #0F2536;  --info-line:    #1A4566;
  --neutral-ink: #CBD5E1;  --neutral-soft: #1E293B;

  /* a cor da marca pode ser escura: no tema escuro o texto/ícone de marca
     clareia para manter contraste sobre o fundo */
  --brand-fg: color-mix(in srgb, var(--brand-accent) 70%, #FFFFFF);
  --brand-soft: color-mix(in srgb, var(--brand-accent) 16%, var(--surface));
  --brand-softer: color-mix(in srgb, var(--brand-accent) 8%, var(--surface));
  --focus: color-mix(in srgb, var(--brand-accent) 45%, transparent);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 52px rgba(0, 0, 0, .5);
}

@media (max-width: 720px) {
  :root { --fs-md: 14px; --fs-sm: 13px; --fs-xl: 19px; --control-h: 38px; }
}