/* ============================================================
   Datainfo Design System — Temas (claro e grafite)
   Duas camadas:
   · --ds-*  marca (tokens/colors.css) — fixa nos dois temas
   · --ui-*  papéis semânticos — mudam por tema
   Componentes usam SOMENTE var(--ui-*). Trocar de tema = trocar papéis.
   Raiz: <html data-theme="light|dark">. Padrão: claro.
   Origem: Relatório de Performance (executive-reports-api @ af74925),
   com as correções de contraste decididas em guidelines/temas.md §5.
   ============================================================ */

/* ---------- Claro (padrão) ---------- */
:root {
  --ui-page:          var(--ds-bg-subtle);
  --ui-card:          var(--ds-white);
  --ui-sunken:        #fafbfc;
  --ui-thead:         var(--ds-bg-subtle);
  --ui-border:        var(--ds-border);
  --ui-border-soft:   #f0f0f0;
  --ui-border-strong: #8c8c8c;   /* contorno de campo: 3,36:1 sobre card */

  --ui-title:         var(--ds-ink-title);
  --ui-body:          var(--ds-ink-body);
  --ui-muted:         #6b6b6b;   /* era #838383 (3,48–3,79) → 4,89–5,33 */
  --ui-placeholder:   var(--ui-muted);
  --ui-faint:         #b0b0b0;   /* só texto desabilitado */

  --ui-topbar:        var(--ds-white);
  --ui-hero:          var(--ds-brand-primary);
  --ui-hero-eyebrow:  var(--ds-accent-light);

  --ui-blue:          var(--ds-brand-primary);
  --ui-blue-soft:     var(--ds-info-bg);
  --ui-blue-line:     var(--ds-surface-blue-soft);
  --ui-on-blue:       var(--ds-white);

  --ui-accent:        var(--ds-brand-accent);   /* gráfico, preenchimento */
  --ui-accent-ink:    #ab511f;                  /* texto laranja: 5,35:1 */
  --ui-accent-soft:   var(--ds-accent-soft-bg);

  --ui-ok:            #007a46;   /* era #009a59 → 5,42:1 */
  --ui-ok-soft:       var(--ds-success-bg);
  --ui-on-ok:         var(--ds-white);

  --ui-coral:         #c0322a;   /* era #d8433a → 5,63:1 */
  --ui-coral-soft:    var(--ds-error-bg);

  --ui-warn:          color-mix(in oklab, var(--ds-warning) 58%, var(--ds-ink-title)); /* #988e45, só gráfico */
  --ui-warn-ink:      #716a30;   /* texto amarelo: 5,52:1 */
  --ui-warn-soft:     color-mix(in oklab, var(--ds-warning) 16%, var(--ds-white));

  --ui-action:        var(--ds-brand-accent);
  --ui-action-hover:  var(--ds-accent-hover);
  --ui-on-accent:     var(--ds-white); /* decisão da marca: branco (2,95:1; hover 3,71) */

  --ui-hover:         rgba(9, 71, 129, 0.05);
  --ui-track:         var(--ds-border);
  --ui-shadow:        0 0 20px rgba(0, 0, 0, 0.07);
  --ui-shadow-raised: 0 12px 30px rgba(9, 71, 129, 0.16);
  --ui-card-line:     transparent;            /* no claro o card se separa pela sombra */
  --ui-tab-active:    var(--ds-brand-primary);

  --ui-focus:         var(--ui-accent-ink); /* borda de foco: 5,35:1 */
  --ui-focus-ring:    color-mix(in srgb, var(--ds-brand-accent) 22%, transparent);

  --ui-on-hero:            var(--ds-white);
  --ui-on-hero-soft:       rgba(255, 255, 255, 0.72);
  --ui-on-hero-chip:       rgba(255, 255, 255, 0.12);
  --ui-on-hero-chip-line:  rgba(255, 255, 255, 0.22);
  --ui-on-hero-mute:       rgba(255, 255, 255, 0.06);
  --ui-on-hero-mute-line:  rgba(255, 255, 255, 0.14);
  --ui-on-hero-mute-ink:   rgba(255, 255, 255, 0.72);
  --ui-on-hero-alert:      rgba(238, 115, 48, 0.18);
  --ui-on-hero-alert-line: rgba(248, 175, 102, 0.5);

  --ui-scrim:         rgba(0, 0, 0, 0.42);
  --ui-drawer-shadow: -12px 0 30px rgba(0, 0, 0, 0.18);

  color-scheme: light;
}

/* ---------- Escuro (grafite, neutros sem viés azul) ---------- */
[data-theme="dark"] {
  --ui-page:          #141414;
  --ui-card:          #1e1e1e;
  --ui-sunken:        #262626;
  --ui-thead:         #262626;
  --ui-border:        #333333;
  --ui-border-soft:   #2a2a2a;
  --ui-border-strong: #6e6e6e;   /* 3,27:1 sobre card */

  --ui-title:         #f0f0f0;
  --ui-body:          #b8b8b8;
  --ui-muted:         #939393;   /* era #8a8a8a; sobre sunken 4,38 → 4,93 */
  --ui-placeholder:   var(--ui-muted);
  --ui-faint:         #5a5a5a;

  --ui-topbar:        #1e1e1e;
  --ui-hero:          #191919;
  --ui-hero-eyebrow:  var(--ds-accent-light);

  --ui-blue:          var(--ds-highlight);
  --ui-blue-soft:     rgba(57, 169, 248, 0.14);
  --ui-blue-line:     var(--ds-surface-blue);
  --ui-on-blue:       #141414;   /* era #0d1117 (azulado) → 7,20:1 */

  --ui-accent:        var(--ds-brand-accent);
  --ui-accent-ink:    var(--ds-accent-light);
  --ui-accent-soft:   rgba(238, 115, 48, 0.16);

  --ui-ok:            var(--ds-success);
  --ui-ok-soft:       rgba(0, 198, 115, 0.14);
  --ui-on-ok:         #141414;

  --ui-coral:         #f4796f;
  --ui-coral-soft:    rgba(233, 82, 73, 0.18);

  --ui-warn:          color-mix(in oklab, var(--ds-warning) 80%, var(--ds-white)); /* #ffe565 */
  --ui-warn-ink:      var(--ui-warn);
  --ui-warn-soft:     rgba(255, 221, 0, 0.12);

  --ui-action:        var(--ds-brand-accent);
  --ui-action-hover:  var(--ds-accent-hover);
  --ui-on-accent:     var(--ds-white);

  --ui-hover:         rgba(255, 255, 255, 0.05);
  --ui-track:         #333333;
  --ui-shadow:        0 12px 30px rgba(0, 0, 0, 0.5);
  --ui-shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.6);
  --ui-card-line:     var(--ui-border);       /* no escuro a sombra não aparece: borda 1px #333 */
  --ui-tab-active:    var(--ui-accent-ink);

  --ui-focus:         var(--ds-brand-accent);
  --ui-focus-ring:    color-mix(in srgb, var(--ds-brand-accent) 34%, transparent);

  --ui-scrim:         rgba(0, 0, 0, 0.6);
  --ui-drawer-shadow: -12px 0 30px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ---------- Derivados (recalculados em qualquer escopo de tema) ---------- */
:root, [data-theme] {
  --ui-topbar-bg:    color-mix(in srgb, var(--ui-topbar) 86%, transparent); /* + backdrop-filter: blur(12px) */
  --ui-blue-hover:   color-mix(in oklab, var(--ui-blue) 82%, black);
  --ui-overlay:      color-mix(in srgb, var(--ui-page) 85%, transparent);
  --ui-chart-tail:   color-mix(in oklab, var(--ui-muted) 34%, var(--ui-card));
  --ui-alert-coral-bg:   color-mix(in oklab, var(--ui-coral) 12%, var(--ui-card));
  --ui-alert-coral-line: color-mix(in oklab, var(--ui-coral) 45%, var(--ui-border));
  --ui-alert-warn-bg:    color-mix(in oklab, var(--ui-warn) 12%, var(--ui-card));
  --ui-alert-warn-line:  color-mix(in oklab, var(--ui-warn) 45%, var(--ui-border));
  --ui-alert-ok-bg:      color-mix(in oklab, var(--ui-ok) 12%, var(--ui-card));
  --ui-alert-ok-line:    color-mix(in oklab, var(--ui-ok) 45%, var(--ui-border));
  --ui-alert-blue-bg:    color-mix(in oklab, var(--ui-blue) 12%, var(--ui-card));
  --ui-alert-blue-line:  color-mix(in oklab, var(--ui-blue) 45%, var(--ui-border));
  --ui-hero-danger-hover: color-mix(in srgb, var(--ds-brand-coral) 38%, transparent);

  /* Aliases antigos (obsoletos) — mantidos para não quebrar consumidores. */
  --ds-text-primary:   var(--ui-title);
  --ds-text-muted:     var(--ui-muted);
  --ds-text-on-brand:  var(--ui-on-hero);
  --ds-text-accent:    var(--ui-accent-ink);
  --ds-surface-page:   var(--ui-page);
  --ds-surface-card:   var(--ui-card);
  --ds-surface-sunken: var(--ui-sunken);
  --ds-surface-hero:   var(--ui-hero);
  --ds-surface-accent: var(--ui-accent);
  --ds-border-default: var(--ui-border);
  --ds-border-focus:   var(--ui-focus);
  --ds-action-primary:       var(--ui-action);
  --ds-action-primary-hover: var(--ui-action-hover);
  --ds-action-secondary:     var(--ui-blue);
  --ds-focus-ring:           var(--ui-focus-ring);
}

/* ---------- Utilitários do tema ---------- */
/* Mostra um elemento só num tema (ex.: ícone do botão de modo), sem esperar JS. */
:root:not([data-theme="dark"]) .ds-when-dark, [data-theme="dark"] .ds-when-light { display: none !important; }
.ds-field::placeholder { color: var(--ui-placeholder); opacity: 1; }