/* EDAT DS — Camada 1: tokens primitivos */
:root {
  --red-50: #FFF5F5;
  --red-100: #FFE4E4;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --red-950: #450A0A;

  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-950: #030712;

  --blue-50: #F0F4FF;
  --blue-100: #E0E8FF;
  --blue-200: #D9E1F5;
  --blue-300: #B8CAF0;
  --blue-400: #91AADF;
  --blue-500: #6B8DCE;
  --blue-600: #4A6CBB;
  --blue-700: #3251A3;
  --blue-800: #1E3A8A;
  --blue-900: #1E2F6E;
  --blue-950: #0F1845;
}

/* EDAT DS — Camada 2: tokens semânticos */
:root {
  /* Superfície */
  --surface-page: var(--gray-100);
  --surface-default: #ffffff;
  --surface-alt: var(--gray-50);
  --surface-brand: var(--red-600);
  --surface-brand-strong: var(--red-700);
  --surface-brand-soft: var(--red-100);
  --surface-brand-wash: var(--red-50);
  --surface-sunken: var(--gray-900);
  --surface-hover: var(--gray-200);
  --surface-hover-soft: var(--gray-100);
  --surface-neutral: var(--gray-200); /* base do componente switch (OFF state) */
  --surface-success: #DCFCE7;
  --surface-info: var(--blue-100);

  /* Texto */
  --text-heading: var(--gray-900);
  --text-strong: var(--gray-700);
  --text-body: var(--gray-600);
  --text-secondary: var(--gray-500);
  --text-muted: var(--gray-400);
  --text-inverse: #ffffff;
  --text-brand: var(--red-600);
  --text-brand-strong: var(--red-700);
  --text-success: #166634;
  --text-info: var(--blue-800);

  /* Borda */
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-brand: var(--red-600);
  --border-focus: var(--red-600);
  --border-brand-soft: var(--red-200);
  --status-online: #22C55E;

  /* Espaçamento */
  --sp-micro: 6px;
  --sp-xs: 10px;
  --sp-sm: 14px;
  --sp-base: 18px;
  --sp-lg: 22px;
  --sp-xl: 26px;
  --sp-2xl: 32px;
  --sp-3xl: 40px;
  --sp-4xl: 48px;
  --sp-section: 64px;

  /* Altura de controles (eixo separado do espaçamento) */
  --ch-36: 36px; /* control-compact — botão padrão */

  /* Arredondamento */
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-full: 9999px;

  /* Tipografia */
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Archivo Narrow", "Inter", system-ui, sans-serif;

  /* Elevação */
  --elevation-low: 0 1px 4px rgba(0, 0, 0, 0.08);
  --elevation-overlay: 0 4px 12px rgba(0, 0, 0, 0.10);
}