/**
 * Design tokens — Painel Central (espelho dos tokens do Antichurn)
 * Mantenha sincronizado com churn-guard-pro/resources/css/design-tokens.css.
 * Original:
 *
 * Fonte única das variáveis descritas em docs/design-system.md. Este
 * arquivo NÃO substitui os tokens shadcn/MUI já existentes em app.css
 * (--background, --primary, --success, --kanban-*, etc.) — eles
 * continuam funcionando como fallback durante a migração. Estes aqui
 * são aditivos e usam nomes próprios (background-base, risk-*,
 * status-*, etc.) para não colidir com nada que já existe.
 *
 * :root é a paleta clara. O tema escuro sobrescreve somente os tokens de
 * cor; espaçamento, tipografia e movimento continuam compartilhados.
 */

:root {
  /* ─── Fundos ─── */
  --background-base: #f6f7f9;
  --background-subtle: #eef0f3;
  --background-surface: #ffffff;
  --background-elevated: #ffffff;
  --background-hover: rgba(35, 35, 35, 0.06);
  --background-active: rgba(0, 95, 206, 0.12);

  /* ─── Bordas ─── */
  --border-subtle: rgba(35, 35, 35, 0.10);
  --border-default: rgba(35, 35, 35, 0.18);
  --border-strong: rgba(35, 35, 35, 0.32);
  --border-focus: rgba(0, 95, 206, 0.82);

  /* ─── Textos ─── */
  --text-primary: #232323;
  --text-secondary: #4f5357;
  --text-tertiary: #686d72;
  --text-disabled: rgba(79, 83, 87, 0.58);
  --text-inverse: #ffffff;

  /* ─── Marca e ações ───
     #0067e1 é a única cor de marca (docs/design-system.md §3.1/§3.5).
     --brand-secondary mapeia para o cinza neutro (§3.5, "brand-neutral")
     em vez de uma cor inventada, para não competir com o azul. */
  --brand-primary: #005fce;
  --brand-primary-hover: #0054b8;
  --brand-primary-pressed: #00499f;
  --brand-primary-muted: rgba(0, 95, 206, 0.12);
  --brand-primary-border: rgba(0, 95, 206, 0.42);
  --brand-neutral: #6e7174;
  --brand-neutral-muted: rgba(110, 113, 116, 0.16);
  --brand-secondary: var(--brand-neutral);
  --brand-secondary-muted: var(--brand-neutral-muted);

  /* ─── Estados de risco ─── */
  --risk-low: #167a4b;
  --risk-low-muted: rgba(22, 122, 75, 0.12);
  --risk-medium: #7a5900;
  --risk-medium-muted: rgba(122, 89, 0, 0.12);
  --risk-high: #ad4300;
  --risk-high-muted: rgba(173, 67, 0, 0.12);
  --risk-critical: #c52f2f;
  --risk-critical-muted: rgba(197, 47, 47, 0.12);

  /* ─── Estados operacionais ─── */
  --status-success-muted: rgba(22, 122, 75, 0.12);
  --status-warning-muted: rgba(122, 89, 0, 0.12);
  --status-error-muted: rgba(197, 47, 47, 0.12);
  --status-info-muted: rgba(0, 95, 206, 0.12);
  --status-neutral-muted: rgba(86, 91, 96, 0.14);
  --status-success: #167a4b;
  --status-warning: #7a5900;
  --status-error: #c52f2f;
  --status-info: #005fce;
  --status-neutral: #565b60;

  /* ─── Cores de gráficos ─── */
  --chart-primary: #0067e1;
  --chart-secondary: #6e7174;
  --chart-tertiary: #e7e5e5;
  --chart-muted: rgba(231, 229, 229, 0.20);
  --chart-low: #45c98a;
  --chart-medium: #e1b84b;
  --chart-high: #ef8b4c;
  --chart-critical: #ef6464;

  /* ─── Espaçamento (múltiplos de 4 — já espelha a escala padrão do
     Tailwind 1:1, mantida aqui para uso em CSS puro / fora do Tailwind) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Bordas, raios e sombras ─── */
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --shadow-card-raw:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-modal-raw: 0 24px 80px rgba(0, 0, 0, 0.45);

  /* ─── Tipografia ─── */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --tracking-display: -0.045em;
  --tracking-heading: -0.025em;
  --tracking-kpi: -0.035em;
  --tracking-body: 0em;
  --tracking-label: 0.04em;

  --line-height-display: 1.00;
  --line-height-heading: 1.20;
  --line-height-body: 1.50;
  --line-height-compact: 1.30;

  /* ─── Animações ─── */
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --duration-slow: 400ms;
  --duration-emphasis: 600ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-color-scheme='dark'],
.dark {
  --background-base: #0d0d0d;
  --background-subtle: #181818;
  --background-surface: #232323;
  --background-elevated: #2b2b2b;
  --background-hover: rgba(249, 249, 249, 0.05);
  --background-active: rgba(0, 103, 225, 0.14);

  --border-subtle: rgba(231, 229, 229, 0.08);
  --border-default: rgba(231, 229, 229, 0.14);
  --border-strong: rgba(249, 249, 249, 0.24);
  --border-focus: #4d9cff;

  --text-primary: #f9f9f9;
  --text-secondary: #e7e5e5;
  --text-tertiary: #9a9da0;
  --text-disabled: rgba(231, 229, 229, 0.62);
  --text-inverse: #ffffff;

  --brand-primary: #0067e1;
  --brand-primary-hover: #1c7dff;
  --brand-primary-pressed: #0058c2;
  --brand-primary-muted: rgba(0, 103, 225, 0.14);
  --brand-primary-border: rgba(77, 156, 255, 0.72);

  --risk-low: #45c98a;
  --risk-low-muted: rgba(69, 201, 138, 0.14);
  --risk-medium: #e1b84b;
  --risk-medium-muted: rgba(225, 184, 75, 0.14);
  --risk-high: #ef8b4c;
  --risk-high-muted: rgba(239, 139, 76, 0.14);
  --risk-critical: #ef6464;
  --risk-critical-muted: rgba(239, 100, 100, 0.14);

  --status-success: #45c98a;
  --status-warning: #e1b84b;
  --status-error: #ef6464;
  --status-info: #4d9cff;
  --status-neutral: #9a9da0;

  --chart-primary: #4d9cff;
  --chart-secondary: #9a9da0;
  --chart-tertiary: #e7e5e5;
  --chart-muted: rgba(231, 229, 229, 0.20);
  --chart-low: #45c98a;
  --chart-medium: #e1b84b;
  --chart-high: #ef8b4c;
  --chart-critical: #ef6464;

  --shadow-card-raw:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-modal-raw: 0 24px 80px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme='light']) {
    --background-base: #0d0d0d;
    --background-subtle: #181818;
    --background-surface: #232323;
    --background-elevated: #2b2b2b;
    --background-hover: rgba(249, 249, 249, 0.05);
    --background-active: rgba(0, 103, 225, 0.14);
  
    --border-subtle: rgba(231, 229, 229, 0.08);
    --border-default: rgba(231, 229, 229, 0.14);
    --border-strong: rgba(249, 249, 249, 0.24);
    --border-focus: #4d9cff;
  
    --text-primary: #f9f9f9;
    --text-secondary: #e7e5e5;
    --text-tertiary: #9a9da0;
    --text-disabled: rgba(231, 229, 229, 0.62);
    --text-inverse: #ffffff;
  
    --brand-primary: #0067e1;
    --brand-primary-hover: #1c7dff;
    --brand-primary-pressed: #0058c2;
    --brand-primary-muted: rgba(0, 103, 225, 0.14);
    --brand-primary-border: rgba(77, 156, 255, 0.72);
  
    --risk-low: #45c98a;
    --risk-low-muted: rgba(69, 201, 138, 0.14);
    --risk-medium: #e1b84b;
    --risk-medium-muted: rgba(225, 184, 75, 0.14);
    --risk-high: #ef8b4c;
    --risk-high-muted: rgba(239, 139, 76, 0.14);
    --risk-critical: #ef6464;
    --risk-critical-muted: rgba(239, 100, 100, 0.14);
  
    --status-success: #45c98a;
    --status-warning: #e1b84b;
    --status-error: #ef6464;
    --status-info: #4d9cff;
    --status-neutral: #9a9da0;
  
    --chart-primary: #4d9cff;
    --chart-secondary: #9a9da0;
    --chart-tertiary: #e7e5e5;
    --chart-muted: rgba(231, 229, 229, 0.20);
    --chart-low: #45c98a;
    --chart-medium: #e1b84b;
    --chart-high: #ef8b4c;
    --chart-critical: #ef6464;
  
    --shadow-card-raw:
      0 1px 2px rgba(0, 0, 0, 0.24),
      0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-modal-raw: 0 24px 80px rgba(0, 0, 0, 0.45);
  }
}

/* Foco visível padrão (docs/design-system.md §25) — baixa especificidade
   de propósito, então qualquer componente com foco próprio (MUI, shadcn)
   continua no comando; isto é só um fallback pra quem não define nada. */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}