/* =========================================================
   TOKENS DE DISEÑO — Deep Navy & Violet (inspirado en SPRUHA)
   ========================================================= */
:root {
  /* Superficies */
  --sidebar: #111027;
  --sidebar-hover: #211F42;
  --sidebar-text: #A9A8C9;
  --sidebar-label: #6E6D93;
  --bg: #EDF0FA;
  --card: #FFFFFF;
  --header: #FFFFFF;
  --surface-2: #F6F7FC;

  /* Marca */
  --primary: #6259CE;
  --primary-hover: #5147BF;
  --primary-soft: #EAE9FB;
  --primary-soft-2: #F3F2FD;
  --primary-rgb: 98, 89, 206;

  /* Texto */
  --text: #15162D;
  --text-2: #8B8BAE;
  --text-3: #B4B4CC;
  --title: #1B1464;

  /* Bordes */
  --border: #E5E8F3;
  --border-2: #EEF0F7;

  /* Semánticos */
  --success: #22C55E;
  --success-soft: #E5F8EC;
  --danger: #FF4D70;
  --danger-soft: #FFE8ED;
  --info: #16B5E8;
  --info-soft: #E2F6FD;
  --warning: #F5B544;
  --warning-soft: #FEF4E2;
  --muted: #9A9AB8;
  --muted-soft: #F1F1F7;

  /* Tipografía */
  --font: "Inter", "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-kpi: 26px;

  /* Geometría */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(17, 16, 39, .03), 0 4px 16px rgba(98, 89, 206, .045);
  --shadow-lg: 0 10px 40px rgba(17, 16, 39, .14);
  --gap: 20px;
  --pad: 24px;

  --sidebar-w: 230px;
  --sidebar-w-collapsed: 74px;
  --header-h: 62px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="dark"] {
  --bg: #0E0D22;
  --card: #18173A;
  --header: #18173A;
  --surface-2: #1F1E44;
  --primary-soft: #2B2862;
  --primary-soft-2: #232152;
  --text: #E9E9F7;
  --text-2: #9A99C2;
  --text-3: #5E5D88;
  --title: #F0EFFF;
  --border: #2A2952;
  --border-2: #24234A;
  --success-soft: #133A2B;
  --danger-soft: #42182A;
  --info-soft: #11314A;
  --warning-soft: #3D3018;
  --muted-soft: #25244A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25);
}