/*
 * design-tokens.css — ponto de partida para um sistema de tokens em CSS puro.
 *
 * COMO USAR
 * - Só quando o projeto NÃO tem tokens próprios. Se já existir tema/tokens, estenda o que existe.
 * - Troque os valores primitivos pela identidade do produto e mantenha a estrutura em níveis:
 *     primitivos (valor bruto)  →  semânticos (intenção)  →  componente (opcional)
 * - Componentes usam SOMENTE tokens semânticos. Nunca um primitivo, nunca um valor literal.
 * - Tema: segue o sistema por padrão; force com <html data-theme="light"> ou "dark".
 *
 * CONTRASTE (WCAG 2.x), conferido por cálculo para os pares semânticos abaixo, nos dois temas:
 *   texto e texto secundário sobre fundo/superfícies ................ >= 4,5:1
 *   texto sobre primária, perigo e fundos de status ................. >= 4,5:1
 *   borda de controle e anel de foco sobre fundo/superfície ......... >= 3:1
 * Ao trocar qualquer cor, RECALCULE os pares antes de afirmar conformidade.
 *
 * Breakpoints não podem ser variáveis em @media. Convenção sugerida (mobile-first, min-width):
 *   sm 40rem (640px) · md 48rem (768px) · lg 64rem (1024px) · xl 80rem (1280px)
 * Prefira @container para componentes e @media para o layout da página.
 */

:root {
  color-scheme: light dark;

  /* ---------- 1. Primitivos ---------- */
  --gray-0: #ffffff;
  --gray-50: #f7f8fa;
  --gray-100: #eef0f4;
  --gray-200: #dfe3ea;
  --gray-300: #c5cbd6;
  --gray-400: #9aa3b2;
  --gray-500: #6b7585;
  --gray-600: #4f5968;
  --gray-700: #3a424f;
  --gray-800: #262c36;
  --gray-900: #171b22;
  --gray-950: #0d1014;

  /* Tema monocromático: nenhum primitivo de cor além da escala de cinza/preto/branco.
     Estados (sucesso/aviso/perigo/info) se diferenciam por forma/ícone/texto no
     componente, nunca por tonalidade — ver portal.css. */

  /* ---------- 2. Semânticos: tema claro ---------- */
  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-2: var(--gray-100);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-200); /* divisórias decorativas */
  --color-border-control: var(--gray-500); /* contorno de campos e controles: precisa de 3:1 */
  --color-primary: var(--gray-900);
  --color-primary-hover: var(--gray-950);
  --color-on-primary: var(--gray-0);
  --color-link: var(--gray-900);
  --color-focus-ring: var(--gray-900);
  --color-danger: var(--gray-900);
  --color-on-danger: var(--gray-0);
  --color-danger-text: var(--gray-900);
  --color-danger-bg: var(--gray-100);
  --color-success-text: var(--gray-900);
  --color-success-bg: var(--gray-100);
  --color-warning-text: var(--gray-900);
  --color-warning-bg: var(--gray-100);
  --color-info-text: var(--gray-900);
  --color-info-bg: var(--gray-100);

  --shadow-sm: 0 1px 2px rgb(13 16 20 / 0.06), 0 1px 1px rgb(13 16 20 / 0.04);
  --shadow-md: 0 4px 10px rgb(13 16 20 / 0.08), 0 1px 3px rgb(13 16 20 / 0.06);
  --shadow-lg: 0 12px 28px rgb(13 16 20 / 0.14), 0 4px 8px rgb(13 16 20 / 0.06);

  /* ---------- 3. Espaçamento (base de 4px) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- 4. Tipografia ---------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* Tamanhos em rem: respeitam o tamanho de fonte escolhido pelo usuário. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  /* Títulos fluidos: rem + vw, para continuarem crescendo com o zoom (nunca só vw). */
  --text-3xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --text-4xl: clamp(2rem, 1.6rem + 2vw, 3rem);

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --measure: 65ch; /* largura confortável de leitura */

  /* ---------- 5. Forma, camadas e movimento ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 999px;

  /* Escala nomeada de camadas: use estes tokens em vez de z-index solto. */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-toast: 1600;
  --z-tooltip: 1700;

  --duration-fast: 120ms; /* hover, pressionar */
  --duration-base: 200ms; /* abrir, fechar, trocar estado */
  --duration-slow: 320ms; /* painéis e transições maiores */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- 6. Interação ---------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --target-min: 2.75rem; /* 44px: alvo confortável. O mínimo da WCAG 2.2 AA é 24px. */
  --content-max: 72rem;
}

/* ---------- Tema escuro: preferência do sistema (se não houver escolha explícita) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--gray-950);
    --color-surface: var(--gray-900);
    --color-surface-2: var(--gray-800);
    --color-text: var(--gray-50);
    --color-text-muted: var(--gray-400);
    --color-border: var(--gray-700);
    --color-border-control: var(--gray-400);
    --color-primary: var(--gray-50);
    --color-primary-hover: var(--gray-0);
    --color-on-primary: var(--gray-950);
    --color-link: var(--gray-50);
    --color-focus-ring: var(--gray-50);
    --color-danger: var(--gray-50);
    --color-on-danger: var(--gray-950);
    --color-danger-text: var(--gray-50);
    --color-danger-bg: var(--gray-800);
    --color-success-text: var(--gray-50);
    --color-success-bg: var(--gray-800);
    --color-warning-text: var(--gray-50);
    --color-warning-bg: var(--gray-800);
    --color-info-text: var(--gray-50);
    --color-info-bg: var(--gray-800);
    /* No escuro a elevação vem mais da superfície clara do que da sombra. */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 10px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.55);
  }
}

/* ---------- Tema escuro: escolha explícita (mesmos valores do bloco acima) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--gray-950);
  --color-surface: var(--gray-900);
  --color-surface-2: var(--gray-800);
  --color-text: var(--gray-50);
  --color-text-muted: var(--gray-400);
  --color-border: var(--gray-700);
  --color-border-control: var(--gray-400);
  --color-primary: var(--gray-50);
  --color-primary-hover: var(--gray-0);
  --color-on-primary: var(--gray-950);
  --color-link: var(--gray-50);
  --color-focus-ring: var(--gray-50);
  --color-danger: var(--gray-50);
  --color-on-danger: var(--gray-950);
  --color-danger-text: var(--gray-50);
  --color-danger-bg: var(--gray-800);
  --color-success-text: var(--gray-50);
  --color-success-bg: var(--gray-800);
  --color-warning-text: var(--gray-50);
  --color-warning-bg: var(--gray-800);
  --color-info-text: var(--gray-50);
  --color-info-bg: var(--gray-800);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 10px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.55);
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* ---------- Base mínima ---------- */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* Foco visível para teclado em qualquer elemento interativo. Não remova sem substituto equivalente. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Conteúdo só para leitores de tela (mensagens de status, rótulos de ícones). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Números em colunas e valores monetários alinham dígito a dígito. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Quem pede menos movimento recebe transições praticamente instantâneas. */
@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;
  }
}