:root {
  /* ─── Backgrounds ─── */
  --bg-primary:    #16171b;
  --bg-secondary:  #1e1f24;
  --bg-tertiary:   #26272d;
  --bg-card:       #2a2b32;
  --bg-card-hover: #32333b;

  /* ─── Text ─── */
  --text-primary:   #f0f1f3;
  --text-secondary: #9fa0a7;
  --text-muted:     #6c6d74;
  /* Placeholder/helper text — lifted from --text-muted to meet WCAG contrast on --bg-card */
  --text-input-placeholder: #8a8b92;

  /* ─── Verde SIEM ─── */
  --accent-primary:   #7AB830;
  --accent-secondary: #8BC34A;
  --accent-dark:      #2E7D32;
  --accent-gradient:  linear-gradient(135deg, #7AB830, #8BC34A);

  /* ─── Borders ─── */
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-accent: rgba(122, 184, 48, 0.40);

  /* ─── Overlays ─── */
  --overlay-dark:     rgba(22, 23, 27, 0.85);
  --overlay-gradient: linear-gradient(180deg, rgba(22, 23, 27, 0.9) 0%, transparent 100%);

  /* ─── Spacing (8px grid) ─── */
  --space-xs:  0.5rem;   /* 8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  2rem;     /* 32px */
  --space-lg:  4rem;     /* 64px */
  --space-xl:  6rem;     /* 96px */
  --space-2xl: 8rem;     /* 128px */

  /* ─── Border Radius ─── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ─── Transitions ─── */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Container ─── */
  --container-max:     1320px;
  --container-padding: clamp(1.5rem, 4vw, 3rem);

  /* ─── Z-Index Scale ─── */
  --z-overlay: 900;
  --z-navbar:  1000;
  --z-modal:   1100;
}