/* =========================================================
   DRIVE DEVBLK · VARIABLES
   Dark · Futurista · Cyberpunk
   ========================================================= */

:root {
  color-scheme: dark;

  /* =======================================================
     COLORES PRINCIPALES
     ======================================================= */

  --accent: #00e5ff;
  --accent-hover: #42efff;
  --accent-active: #00bcd4;
  --accent-soft: rgba(0, 229, 255, 0.08);
  --accent-border: rgba(0, 229, 255, 0.38);

  --success: #45f5a7;
  --success-hover: #72f8bd;
  --success-soft: rgba(69, 245, 167, 0.08);
  --success-border: rgba(69, 245, 167, 0.34);

  --warning: #ffc857;
  --warning-hover: #ffd77f;
  --warning-soft: rgba(255, 200, 87, 0.09);
  --warning-border: rgba(255, 200, 87, 0.35);

  --danger: #ff5263;
  --danger-hover: #ff7a87;
  --danger-soft: rgba(255, 82, 99, 0.08);
  --danger-border: rgba(255, 82, 99, 0.38);

  --info: #6d8dff;
  --info-hover: #91a8ff;
  --info-soft: rgba(109, 141, 255, 0.08);
  --info-border: rgba(109, 141, 255, 0.35);

  /* =======================================================
     FONDOS
     ======================================================= */

  --app-bg: #05070a;
  --app-bg-strong: #030508;
  --app-bg-soft: #080b10;

  --surface: #0b0f15;
  --surface-soft: #10151d;
  --surface-muted: #141a22;
  --surface-strong: #19212b;
  --surface-hover: #151c25;

  --overlay: rgba(2, 4, 7, 0.84);

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

  --text: #f2f6fa;
  --text-strong: #ffffff;
  --text-muted: #9ca8b5;
  --text-soft: #657282;
  --text-disabled: #4e5966;
  --text-inverse: #001014;

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

  --line-soft: #171d25;
  --line: #212a35;
  --line-strong: #303c49;
  --line-focus: #00e5ff;

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

  --sidebar-bg: #070a0f;
  --sidebar-surface: #0d1219;
  --sidebar-surface-hover: #121922;
  --sidebar-surface-active: rgba(0, 229, 255, 0.08);

  --sidebar-text: #f1f7fb;
  --sidebar-text-muted: #83909f;
  --sidebar-text-soft: #55616e;

  --sidebar-line: #1d252f;
  --sidebar-line-strong: #2c3743;

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

  --sidebar-width: 272px;
  --topbar-height: 82px;

  --content-max-width: 1800px;

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

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* =======================================================
     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:
    120ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

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

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

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

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

  --font-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;
}