/* =========================================================
   DRIVE ZERNYX · VARIABLES
   Drive Zernyx · monocromático, sobrio
   ========================================================= */

:root {
  color-scheme: dark;

  /* =======================================================
     ACENTO · monocromático (blanco hueso)
     Los colores se reservan para estados (ok / alerta / error).
     ======================================================= */

  --accent: #e8e8ec;
  --accent-hover: #ffffff;
  --accent-active: #c4c4ca;
  --accent-soft: rgba(255, 255, 255, 0.06);
  --accent-border: rgba(255, 255, 255, 0.26);

  --success: #62b87e;
  --success-hover: #7ccb95;
  --success-soft: rgba(98, 184, 126, 0.10);
  --success-border: rgba(98, 184, 126, 0.34);

  --warning: #d4a646;
  --warning-hover: #e2b95f;
  --warning-soft: rgba(212, 166, 70, 0.10);
  --warning-border: rgba(212, 166, 70, 0.34);

  --danger: #de5650;
  --danger-hover: #e8766f;
  --danger-soft: rgba(222, 86, 80, 0.10);
  --danger-border: rgba(222, 86, 80, 0.38);

  --info: #8a93a8;
  --info-hover: #a3abbd;
  --info-soft: rgba(138, 147, 168, 0.10);
  --info-border: rgba(138, 147, 168, 0.34);

  /* =======================================================
     FONDOS (translúcidos: dejan ver el fondo animado)
     ======================================================= */

  --app-bg: #0a0a0c;
  --app-bg-strong: #060607;
  --app-bg-soft: #0e0e11;

  --surface: rgba(17, 17, 20, 0.86);
  --surface-soft: rgba(22, 22, 26, 0.88);
  --surface-muted: rgba(27, 27, 32, 0.90);
  --surface-strong: rgba(34, 34, 40, 0.92);
  --surface-hover: rgba(30, 30, 36, 0.92);

  --overlay: rgba(4, 4, 6, 0.80);

  /* =======================================================
     TEXTO
     ======================================================= */

  --text: #e9e9ec;
  --text-strong: #ffffff;
  --text-muted: #9c9ca6;
  --text-soft: #70707b;
  --text-disabled: #4d4d57;
  --text-inverse: #0a0a0c;

  /* =======================================================
     BORDES
     ======================================================= */

  --line-soft: #1b1b20;
  --line: #26262c;
  --line-strong: #383840;
  --line-focus: #e8e8ec;

  /* =======================================================
     SIDEBAR
     ======================================================= */

  --sidebar-bg: rgba(11, 11, 14, 0.90);
  --sidebar-surface: rgba(18, 18, 22, 0.90);
  --sidebar-surface-hover: rgba(26, 26, 31, 0.92);
  --sidebar-surface-active: rgba(255, 255, 255, 0.07);

  --sidebar-text: #e9e9ec;
  --sidebar-text-muted: #8d8d98;
  --sidebar-text-soft: #5f5f69;

  --sidebar-line: #212126;
  --sidebar-line-strong: #32323a;

  /* =======================================================
     DIMENSIONES
     ======================================================= */

  --sidebar-width: 228px;
  --topbar-height: 64px;

  --content-max-width: 1800px;

  /* =======================================================
     RADIOS
     ======================================================= */

  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-pill: 0px;

  /* =======================================================
     ESPACIADO
     ======================================================= */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;

  /* =======================================================
     TRANSICIONES
     ======================================================= */

  --transition-fast:
    90ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --transition:
    140ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --transition-slow:
    300ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  /* =======================================================
     TIPOGRAFÍA
     ======================================================= */

  --font-family:
    "Inter",
    "DM Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  --font-mono:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 26px;
  --font-size-3xl: 34px;
}