:root {
  /* 🎨 Colores principales */
  --color-background: #000000;
  --color-text: #f3efe0;
  --color-accent-1: #fc11a2;
  --color-accent-2: #00fff5;
  --color-sidebar-bg: #1bd0d6a9;
  --color-sidebar-border: #1bd0d6;
  --color-btn-bg: #00adb5;
  --color-btn-hover: #fc11a2;
  --color-icon-bg: #00e3f3;

  /* 🖋 Tipografía */
  --font-family-main: "Arial", sans-serif;

  /* 📏 Medidas */
  --sidebar-width: 250px;
  --profile-img-size: 150px;
  --border-radius: 5px;
  --transition-speed: 0.3s;

  /* 📱 Breakpoints (solo como referencia: los @media no aceptan var(),
     por eso los valores reales se repiten como números literales en
     cada archivo CSS, pero deben coincidir con estos) */
  --breakpoint-tablet: 992px;
  --breakpoint-mobile: 768px;
  --breakpoint-mobile-sm: 480px;
}