:root {
  /* ── Paleta cinza (tom base do boilerplate) ── */
  --gray-950: #0d1117;
  --gray-900: #1a202c;
  --gray-800: #2d3748;
  --gray-700: #4a5568;
  --gray-600: #606878;
  --gray-500: #718096;
  --gray-400: #a0aec0;
  --gray-300: #cbd5e0;
  --gray-200: #e2e8f0;
  --gray-100: #f7fafc;
  --gray-50:  #fafafa;

  /* Aliases semânticos (trocar aqui ao criar novo sistema) */
  --primary-900: var(--gray-900);  /* sidebar background      */
  --primary-700: var(--gray-700);  /* sidebar hover / active  */
  --primary-500: var(--gray-500);  /* accent / item active bg */
  --primary-300: var(--gray-300);  /* borders leves           */
  --primary-100: var(--gray-100);  /* page background         */

  /* Neutros */
  --white:  #ffffff;
  --black:  #000000;

  /* Feedback */
  --green-600: #16a34a;
  --green-100: #dcfce7;
  --red-600:   #dc2626;
  --red-100:   #fee2e2;
  --yellow-600:#ca8a04;
  --yellow-100:#fef9c3;
  --blue-600:  #2563eb;
  --blue-100:  #dbeafe;

  /* Layout */
  --sidebar-w:           232px;
  --sidebar-w-collapsed:  64px;
  --topbar-h:             60px;
  --radius:               8px;
  --radius-sm:            6px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.18);

  /* ── Tokens de tema (claro por padrão) ──
     Componentes devem usar estes, não --gray-* direto, para suportar
     dark mode via [data-theme="dark"] abaixo. --gray-*/--white seguem
     existindo para peças que são sempre escuras (sidebar) independente
     do tema. */
  --bg-page:            var(--gray-100);
  --bg-surface:         var(--white);
  --bg-surface-alt:     var(--gray-50);
  --text-primary:       var(--gray-900);
  --text-secondary:     var(--gray-700);
  --text-muted:         var(--gray-500);
  --border-color:       var(--gray-200);
  --border-color-strong:var(--gray-300);
}

:root[data-theme="dark"] {
  --dark-900: #0b0f16;
  --dark-800: #141a24;
  --dark-700: #1c2431;
  --dark-600: #2a3444;
  --dark-500: #4a5568;

  --bg-page:            var(--dark-900);
  --bg-surface:         var(--dark-800);
  --bg-surface-alt:     var(--dark-700);
  --text-primary:       #e8ecf1;
  --text-secondary:     #b0bac6;
  --text-muted:         #7d8899;
  --border-color:       var(--dark-600);
  --border-color-strong:var(--dark-500);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}