/*
 * Design tokens do sistema de Auditoria de Atendimento.
 * Define cores, espacos, tipografia, radii e sombras como CSS custom properties.
 * Todas as regras visuais subsequentes devem consumir essas variaveis.
 *
 * Convencao:
 *   --color-*       cores semanticas (surface, text, brand, success, error, warning)
 *   --space-*       escala de espacamento em multiplos de 4px
 *   --radius-*      raios de borda
 *   --text-*        tamanhos tipograficos
 *   --shadow-*      sombras (preferir sobre bordas)
 *   --font-*        familias de fonte
 */

/* Fonte Inter self-hostada (pesos 400, 500, 600, 700).
   font-display: swap evita FOIT enquanto o woff2 carrega. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Inter-700.woff2") format("woff2");
}

/* -------------------------------------------------------------------------- */
/* Light mode (default)                                                       */
/* -------------------------------------------------------------------------- */
:root {
  /* Cores de marca */
  --color-brand: #2b5bd7;
  --color-brand-hover: #1e46b8;
  --color-brand-pressed: #173a99;
  --color-brand-subtle: #e6ecfb; /* fundo suave / hover em superficies claras */

  /* Cores funcionais (pareadas com icone/texto, nunca usadas sozinhas como sinal) */
  --color-success: #0e9f6e;
  --color-success-subtle: #e0f5ed;
  --color-error: #e02424;
  --color-error-subtle: #fbe6e6;
  --color-warning: #c27803;
  --color-warning-subtle: #faf0dc;

  /* Neutros (zinc) — textos, bordas, superficies */
  --color-surface: #fafafa;          /* fundo da pagina */
  --color-surface-raised: #ffffff;   /* cards, header, modais */
  --color-surface-sunken: #f4f4f5;   /* zonas rebaixadas, skeletons */
  --color-border: #e4e4e7;           /* bordas suaves */
  --color-border-strong: #d4d4d8;    /* bordas de input em foco/hover */
  --color-text: #18181b;             /* texto primario (near-black, nao puro) */
  --color-text-muted: #52525b;       /* texto secundario */
  --color-text-subtle: #71717a;      /* metadados, timestamps */
  --color-text-disabled: #a1a1aa;

  /* Espacamento — escala multipla de 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  /* Tipografia */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-display: 40px;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  /* Sombras — preferir sobre bordas em cards */
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.06);
  --shadow-md: 0 2px 4px rgba(24, 24, 27, 0.06), 0 4px 12px rgba(24, 24, 27, 0.08);
  --shadow-lg: 0 8px 24px rgba(24, 24, 27, 0.12), 0 2px 6px rgba(24, 24, 27, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

/* -------------------------------------------------------------------------- */
/* Dark mode — surfaces escurecem, brand permanece                            */
/* Ativado automaticamente por prefers-color-scheme ou manualmente via        */
/* [data-theme="dark"] no <html>. O override manual vence sobre o automatico. */
/* -------------------------------------------------------------------------- */

/* Tokens dark compartilhados entre auto e manual (usando custom props aninhadas
   nao e trivial em CSS — repetimos o bloco e o ultimo vence no cascade). */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand: #6e8fe6;
    --color-brand-hover: #8aa5ec;
    --color-brand-pressed: #a3baf0;
    --color-brand-subtle: #1e2a47;

    --color-success: #34d399;
    --color-success-subtle: #0e2a21;
    --color-error: #f87171;
    --color-error-subtle: #2d1414;
    --color-warning: #fbbf24;
    --color-warning-subtle: #2a1f0a;

    --color-surface: #0e0e11;
    --color-surface-raised: #18181b;
    --color-surface-sunken: #09090b;
    --color-border: #27272a;
    --color-border-strong: #3f3f46;
    --color-text: #fafafa;
    --color-text-muted: #a1a1aa;
    --color-text-subtle: #71717a;
    --color-text-disabled: #52525b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}

/* Override manual: forca dark mode independente do OS */
:root[data-theme="dark"] {
  --color-brand: #6e8fe6;
  --color-brand-hover: #8aa5ec;
  --color-brand-pressed: #a3baf0;
  --color-brand-subtle: #1e2a47;

  --color-success: #34d399;
  --color-success-subtle: #0e2a21;
  --color-error: #f87171;
  --color-error-subtle: #2d1414;
  --color-warning: #fbbf24;
  --color-warning-subtle: #2a1f0a;

  --color-surface: #0e0e11;
  --color-surface-raised: #18181b;
  --color-surface-sunken: #09090b;
  --color-border: #27272a;
  --color-border-strong: #3f3f46;
  --color-text: #fafafa;
  --color-text-muted: #a1a1aa;
  --color-text-subtle: #71717a;
  --color-text-disabled: #52525b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* -------------------------------------------------------------------------- */
/* Base — aplica fonte padrao e numeros tabulares em contextos numericos      */
/* -------------------------------------------------------------------------- */
html {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Numeros tabulares em qualquer elemento marcado com .tabular-nums ou em
   elementos de dado (KPIs, metricas). Tailwind ja expoe via classe
   `tabular-nums`; esse utilitario fica disponivel mesmo sem a classe. */
.tabular-nums,
[data-numeric] {
  font-variant-numeric: tabular-nums;
}

/* Acessibilidade: desabilita animacoes quando usuario prefere menos motion. */
@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;
  }
}