/* ══════════════════════════════════════════════════════════════
   SYSWASTE — Design Tokens
   Fonte única de cores, tipografia, espaçamento, raio e sombra.
   Consumido pelo site (index.html) e pelo ERP (via syswaste-erp.css).
   Nomes semânticos compatíveis com a convenção shadcn/ui.
   Documentação: DESIGN_SYSTEM.md
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Marca ── */
  --brand-navy: #071923;
  --brand-green: #087A4A;
  --brand-green-light: #16B364;
  --brand-teal: #0D9488;

  /* ── Paleta base ── */
  --navy-950: #071923;
  --navy-900: #0B2430;
  --navy-800: #113542;
  --navy-700: #1A4656;
  --green-800: #06603B;
  --green-700: #087A4A;
  --green-600: #0A9657;
  --green-500: #16B364;
  --green-400: #3CCB7F;
  --green-100: #DCFCE7;
  --green-50: #F0FDF4;
  --teal-700: #0F766E;
  --teal-600: #0D9488;
  --teal-100: #CCFBF1;
  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --blue-100: #DBEAFE;
  --blue-50: #EFF6FF;
  --slate-950: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-550: #5B6B7C;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50: #F8FAFC;
  --red-700: #B91C1C;
  --red-600: #DC2626;
  --red-100: #FEE2E2;
  --amber-700: #B45309;
  --amber-500: #F59E0B;
  --amber-100: #FEF3C7;
  --orange-700: #C2410C;
  --orange-100: #FFEDD5;
  --violet-700: #6D28D9;
  --violet-100: #EDE9FE;

  /* ── Semânticos: superfícies ── */
  --background: #F5F7F9;
  --foreground: var(--slate-950);
  --surface: #FFFFFF;
  --surface-secondary: #F8FAFC;
  --surface-muted: #F1F5F9;
  --surface-elevated: #FFFFFF;

  /* ── Semânticos: ações ── */
  --primary: var(--green-700);          /* texto branco 5,4:1 */
  --primary-hover: var(--green-800);
  --primary-active: #054F31;
  --primary-foreground: #FFFFFF;
  --secondary: var(--navy-900);
  --secondary-hover: var(--navy-800);
  --secondary-foreground: #FFFFFF;
  /* "accent" = destaque de marca (texto/borda/indicador). A superfície de
     hover neutra é --surface-muted. Ver DESIGN_SYSTEM.md › Tokens. */
  --accent: var(--green-700);
  --accent-foreground: #FFFFFF;
  --accent-soft: var(--green-100);

  /* ── Semânticos: texto e linhas ── */
  --muted: var(--slate-100);
  --muted-foreground: var(--slate-550);  /* ≥ 5:1 sobre o background */
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --input: var(--slate-300);
  --ring: rgba(10, 150, 87, .35);
  --ring-strong: var(--green-600);

  /* ── Semânticos: status (texto = tom 700, legível sobre branco e sobre o soft) ── */
  --success: #15803D;
  --success-fill: #16A34A;
  --success-soft: var(--green-100);
  --warning: var(--amber-700);
  --warning-fill: var(--amber-500);
  --warning-soft: var(--amber-100);
  --danger: var(--red-600);
  --danger-strong: var(--red-700);
  --danger-soft: var(--red-100);
  --info: var(--blue-600);
  --info-strong: var(--blue-700);
  --info-soft: var(--blue-100);
  --alert: var(--orange-700);
  --alert-soft: var(--orange-100);
  --neutral: var(--slate-600);
  --neutral-soft: var(--slate-100);

  /* ── Sidebar ── */
  --sidebar: var(--navy-950);
  --sidebar-foreground: #B8C4CF;
  --sidebar-muted: #8A9AA8;
  --sidebar-hover: rgba(255, 255, 255, .06);
  --sidebar-active: rgba(22, 179, 100, .14);
  --sidebar-active-foreground: #FFFFFF;
  --sidebar-indicator: var(--green-500);
  --sidebar-border: rgba(255, 255, 255, .08);

  /* ── Tipografia ── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display: 600 28px/34px var(--font-display);
  --text-h1: 600 22px/28px var(--font-display);
  --text-h2: 600 18px/24px var(--font-display);
  --text-h3: 600 16px/22px var(--font-display);
  --text-h4: 600 14px/20px var(--font-display);
  --text-body-lg: 400 15px/22px var(--font-sans);
  --text-body: 400 14px/20px var(--font-sans);
  --text-body-sm: 400 13px/18px var(--font-sans);
  --text-label: 500 12px/16px var(--font-sans);
  --text-caption: 400 11.5px/16px var(--font-sans);
  --text-button: 500 13.5px/20px var(--font-sans);
  --text-metric-lg: 600 26px/30px var(--font-sans);
  --text-metric-md: 600 20px/26px var(--font-sans);
  --text-overline: 600 11px/14px var(--font-sans);
  --tracking-overline: .06em;

  /* ── Espaçamento (base 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;

  /* ── Raio ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ── Sombra (uso restrito: dropdown, popover, modal, menu flutuante) ── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, .10), 0 2px 4px rgba(15, 23, 42, .05);
  --shadow-lg: 0 20px 48px rgba(7, 25, 35, .22);

  /* ── Movimento ── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: .12s;
  --duration: .18s;

  /* ── Layout ── */
  --sidebar-w: 248px;
  --sidebar-collapsed-w: 64px;
  --topbar-h: 60px;

  /* ── Gráficos (séries categóricas em ordem fixa) ── */
  --chart-1: var(--green-600);
  --chart-2: var(--blue-600);
  --chart-3: var(--navy-800);
  --chart-4: var(--teal-600);
  --chart-5: var(--amber-500);
  --chart-6: var(--violet-700);
  --chart-grid: var(--slate-200);
  --chart-axis: var(--slate-550);
}