:root {
  /* ===== COLORES SEMÁNTICOS ===== */
  --color-primary: #4a6cf7;
  --color-primary-strong: #3b5bdb;
  --color-primary-soft: rgba(74, 108, 247, 0.12);

  --color-accent: #22d3ee;
  --color-accent-strong: #06b6d4;

  --color-good: #22c55e;
  --color-warn: #f59e0b;
  --color-danger: #ef4444;

  /* Texto */
  --color-text-strong: #f8fafc;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-dim: #64748b;

  --color-text-on-light: #0f172a;
  --color-text-muted-on-light: #475569;

  /* Superficies */
  --color-surface-dark: #0f172a;
  --color-surface-darker: #020617;
  --color-surface-light: #f8fafc;
  --color-surface-light-strong: #ffffff;

  --color-glass: rgba(30, 41, 59, 0.55);
  --color-glass-strong: rgba(15, 23, 42, 0.85);
  --color-glass-light: rgba(255, 255, 255, 0.85);

  /* Bordes */
  --color-border: rgba(148, 163, 184, 0.22);
  --color-border-strong: rgba(148, 163, 184, 0.35);
  --color-border-light: #e2e8f0;

  /* ===== GRADIENTES MAESTROS ===== */
  --gradient-bg-dark:
    radial-gradient(circle at 20% 0%, rgba(74, 108, 247, 0.35), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(6, 182, 212, 0.20), transparent 40%),
    linear-gradient(180deg, #1e293b 0%, #020617 100%);

  --gradient-bg-dashboard:
    radial-gradient(circle at 15% 0%, rgba(74, 108, 247, 0.12), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(6, 182, 212, 0.10), transparent 40%),
    linear-gradient(180deg, #0f172a 0%, #0b1220 100%);

  --gradient-bg-light:
    radial-gradient(circle at 20% 20%, #eef2ff, #f8fafc 60%);

  --gradient-primary: linear-gradient(135deg, #4a6cf7, #3b5bdb);
  --gradient-primary-soft: linear-gradient(135deg, #4a6cf7 0%, #06b6d4 100%);

  /* ===== TIPOGRAFÍA ===== */
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 44px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.55;

  /* ===== ESPACIADO ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===== RADIUS ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ===== SOMBRAS ===== */
  --shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.18);
  --shadow-md: 0 10px 25px rgba(2, 6, 23, 0.22);
  --shadow-lg: 0 20px 45px rgba(2, 6, 23, 0.35);
  --shadow-glow: 0 8px 28px rgba(74, 108, 247, 0.35);
  --shadow-card-light: 0 10px 30px rgba(15, 23, 42, 0.06);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;
}