/* =========================================================
   ControlPlan Modern Enterprise Design System - Tokens
   ========================================================= */
:root {
  /* Color Palette Oficial — Brand Book RootJumps Tech */
  --bg-main: #071226;          /* Fondo Oscuro Oficial */
  --bg-surface: #0f172a;       /* Negro Suave Oficial */
  --bg-sidebar: #071226;       /* Fondo Oscuro */
  --bg-card: rgba(15, 23, 42, 0.75);      /* Negro Suave translúcido */
  --bg-card-hover: rgba(15, 23, 42, 0.90);
  --bg-input: #071226;
  --bg-glass: rgba(15, 23, 42, 0.65);
  --border-glass: rgba(241, 245, 249, 0.08); /* Gris Claro con opacidad */
  --border-glass-focus: rgba(59, 130, 246, 0.5);

  /* Accents Oficiales */
  --primary: #3b82f6;          /* Azul Tecnológico (#3B82F6) */
  --primary-hover: #2563eb;
  --primary-glow: rgba(59, 130, 246, 0.25);
  --accent-blue: #3b82f6;      /* Azul Tecnológico */
  --accent-green: #10b981;     /* Verde Conexión (#10B981) */
  --coral-terra: #d97757;      /* Coral Terracota Oficial (#D97757) - Innovación & Acento */
  --coral-terra-glow: rgba(217, 119, 87, 0.25);
  --cyan: #3b82f6;             /* Alias tecnológico compatible */
  --cyan-glow: rgba(59, 130, 246, 0.25);
  --emerald: #10b981;          /* Verde Conexión Oficial */
  --emerald-glow: rgba(16, 185, 129, 0.25);
  --amber: #f59e0b;
  --amber-glow: rgba(245, 158, 11, 0.25);
  --rose: #f43f5e;
  --rose-glow: rgba(244, 63, 94, 0.25);

  /* Text Colors Oficiales */
  --text-white: #ffffff;       /* Blanco Oficial (#FFFFFF) */
  --text-main: #f1f5f9;        /* Gris Claro Oficial (#F1F5F9) */
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Typography Oficial — Brand Book RootJumps Tech */
  --font-heading: 'Poppins', 'Montserrat', sans-serif; /* Títulos y Marca (Bold, 36-60px) */
  --font-sans: 'Inter', 'Roboto', system-ui, sans-serif; /* Secundaria / Cuerpo (Regular, 14-18px) */
  --font-body: 'Inter', 'Roboto', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.25);

  /* Transitions & Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout & Responsive Tokens */
  --sidebar-width: 260px;
  --topbar-height: 64px;
  --z-topbar: 800;
  --z-backdrop: 990;
  --z-sidebar: 1000;
  --z-modal: 2000;
}