/*
 * Meta CS — Design tokens (CSS puro, sem dependência de framework)
 * Versão 1.0 · outubro/2026 · origem: Inventário Meta CS
 *
 * Como usar: importe este arquivo antes de qualquer outro CSS do sistema.
 * Use SEMPRE as variáveis semânticas (--color-*) no código de tela; as rampas
 * (--slate-*, --blue-*) existem para casos pontuais de componente.
 */
:root {
  /* ── Marca ─────────────────────────────────────────────────────────── */
  --color-accent: #0467df;          /* Azul institucional Meta */
  --color-accent-hover: #0356b8;    /* Hover / pressionado */
  --color-accent-soft: rgb(4 103 223 / 0.08); /* Fundo de item ativo, realce */
  --color-accent-light: #e8f1fd;    /* Badge, ícone em destaque, seleção */
  --color-accent-subtle: #dbeafe;   /* Bordas e trilhas em azul */
  --color-brand-surface: #0056a4;   /* Sidebar, topo mobile, painel do login */

  /* ── Superfícies (camadas: fundo → superfície → flutuante) ─────────── */
  --color-bg: #f5f7fa;              /* Fundo da aplicação */
  --color-surface: #ffffff;         /* Cards, painéis, topo desktop, modais */
  --color-dark: #1c2b33;            /* Matiz dos neutros */

  /* ── Texto ─────────────────────────────────────────────────────────── */
  --color-text-primary: #16232b;    /* 16:1 sobre branco */
  --color-text-secondary: #526370;  /* 6.2:1 sobre branco */
  --color-text-muted: #607682;      /* slate-500 · legendas (≥ 4.5:1) */
  --color-text-on-brand: #ffffff;   /* Texto sobre o azul (7.3:1) */

  /* ── Bordas ────────────────────────────────────────────────────────── */
  --color-border: #e3e8ee;          /* Cards e divisórias externas */
  --color-border-strong: #d3dae3;   /* Campos de formulário, botão secundário */
  --color-border-light: #eef1f5;    /* Divisórias internas de lista */

  /* ── Semânticas (base · fundo claro · texto escuro) ────────────────── */
  --color-success: #10b981;  --color-success-light: #ecfdf5;  --color-success-dark: #047857;
  --color-warning: #f59e0b;  --color-warning-light: #fffbeb;  --color-warning-dark: #b45309;
  --color-danger: #ef4444;   --color-danger-light: #fef2f2;   --color-danger-dark: #b91c1c;
  --color-info: #3b82f6;     --color-info-light: #eff6ff;     --color-info-dark: #1d4ed8;

  /* ── Neutros (rampa puxada para o matiz da marca) ──────────────────── */
  --slate-50: #f7fafc;  --slate-100: #eff5f8; --slate-200: #dfe8ed; --slate-300: #c8d5dd;
  --slate-400: #7b909c; --slate-500: #607682; --slate-600: #435762; --slate-700: #30434d;
  --slate-800: #1c2a32; --slate-900: #0d1920; --slate-950: #02080e;

  /* ── Tipografia ────────────────────────────────────────────────────── */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display: 600 2rem/2.5rem var(--font-sans);     /* 32/40 · -0.03em */
  --text-title: 600 1.625rem/2rem var(--font-sans);     /* 26/32 · -0.025em */
  --text-metric: 600 1.75rem/2.125rem var(--font-sans); /* 28/34 · -0.03em · tabular */
  --text-section: 600 0.9375rem/1.375rem var(--font-sans); /* 15/22 · -0.011em */
  --text-body: 400 0.875rem/1.5 var(--font-sans);       /* 14/21 */
  --text-secondary: 400 0.8125rem/1.25rem var(--font-sans); /* 13/20 */
  --text-caption: 400 0.75rem/1rem var(--font-sans);    /* 12/16 */
  --text-overline: 600 0.6875rem/1rem var(--font-sans); /* 11/16 · +0.06em · CAIXA ALTA */

  /* ── Espaço (escala de 4px) ────────────────────────────────────────── */
  --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;

  /* ── Raio ──────────────────────────────────────────────────────────── */
  --radius-sm: 6px;    /* Badge */
  --radius-md: 8px;    /* Campo, botão, item de menu */
  --radius-lg: 12px;   /* Card, painel, tabela, popover */
  --radius-xl: 16px;   /* Modal, drawer */
  --radius-shell: 20px; /* Sidebar (direita) e topo mobile (embaixo) */
  --radius-full: 9999px;

  /* ── Sombras (profundidade percebida, nunca pesada) ───────────────── */
  --shadow-xs: 0 1px 2px rgba(16, 32, 48, 0.04);
  --shadow-card: 0 1px 2px rgba(16, 32, 48, 0.04), 0 2px 8px -2px rgba(16, 32, 48, 0.05);
  --shadow-raised: 0 1px 2px rgba(16, 32, 48, 0.05), 0 6px 16px -6px rgba(16, 32, 48, 0.1);
  --shadow-popover: 0 0 0 1px rgba(16, 32, 48, 0.06), 0 8px 24px -6px rgba(16, 32, 48, 0.14), 0 2px 6px -2px rgba(16, 32, 48, 0.06);
  --shadow-modal: 0 0 0 1px rgba(16, 32, 48, 0.06), 0 24px 64px -16px rgba(16, 32, 48, 0.28);
  --shadow-brand: 0 24px 48px -12px rgba(0, 40, 90, 0.45); /* Sidebar aberta */
  --shadow-brand-top: 0 6px 18px -10px rgba(0, 40, 90, 0.4); /* Topo azul mobile */

  /* ── Movimento ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* Padrão: estados e entradas */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Progresso, loops de carregamento */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Painéis grandes que chegam */
  --duration-instant: 150ms; /* hover, cor, pressionar */
  --duration-fast: 200ms;    /* fade, foco, fechar */
  --duration-base: 300ms;    /* drawer, sidebar, modal */
  --duration-enter: 400ms;   /* entrada de página e cards */
  --stagger: 50ms;           /* intervalo entre itens em sequência */

  /* ── Camadas ───────────────────────────────────────────────────────── */
  --z-topbar: 30; --z-bottom-nav: 30; --z-sidebar: 40; --z-overlay: 50; --z-modal: 50;
}