:root {
  /* Paleta de Colores Base */
  --color-dark-midnight: #14181f; /* Fondo principal oscuro */
  --color-dark-card: #202735;    /* Fondo de tarjetas y elementos elevados */
  --color-neon-green: #00ffab;   /* Acento principal (CTAs, highlights) */
  --color-light-text: #CED4E2;   /* Texto principal sobre fondos oscuros (contraste mejorado) */
  --color-medium-text: #8899a6;  /* Texto secundario o menos importante */
  --color-link: #58a6ff;         /* Enlaces estándar */
  --color-link-hover: #79c0ff;   /* Hover de enlaces */
  --color-border: #30363d;       /* Bordes sutiles */
  --color-danger: #f85149;       /* Errores, alertas */
  --color-warning: #d29922;      /* Advertencias */
  --color-success: #2ea043;      /* Éxito */

  /* Alias Semánticos (para usar en componentes) */
  --color-background: var(--color-dark-midnight);
  --color-foreground: var(--color-light-text);
  --color-background-card: var(--color-dark-card);
  --color-text-primary: var(--color-light-text);
  --color-text-secondary: var(--color-medium-text);
  --color-accent-primary: var(--color-neon-green);
  --color-button-primary-bg: var(--color-neon-green);
  --color-button-primary-text: var(--color-dark-midnight);
  --color-button-secondary-bg: transparent;
  --color-button-secondary-text: var(--color-neon-green);
  --color-button-secondary-border: var(--color-neon-green);

  /* Radios */
  --radius-small: 4px;
  --radius-medium: 8px; /* Para tarjetas, botones */
  --radius-large: 12px;
  --radius-card: var(--radius-medium);
  --radius-button: var(--radius-medium);

  /* Sombras */
  --shadow-depth-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* Sutil */
  --shadow-depth-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); /* Estándar para cards */
  --shadow-depth-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); /* Más pronunciada */
  --shadow-card: var(--shadow-depth-2);

  /* Tipografía Base (se aplicarán en el siguiente paso) */
  --font-family-headings: 'Poppins', sans-serif;
  --font-family-base: 'Inter', sans-serif;
  --font-weight-heading: 700;
  --font-weight-base: 500;
  --base-font-size-px: 18px;
  --base-font-size-rem: 1.125rem; /* 18px / 16px */
}

/* Media query para modo de alto contraste (ejemplo básico) */
@media (prefers-contrast: more) {
  :root {
    --color-light-text: #ffffff;
    --color-border: #606770;
  }
}