/* =============================================
   THEME — Color palette & design tokens 2026
   Cambiar valores aquí retemiza toda la app
   ============================================= */

:root {

  /* ── Paleta base: neutrales fríos (no grises puros) ── */
  --gray-50:  #f8f8fb;
  --gray-100: #f0f0f5;
  --gray-200: #e2e2ea;
  --gray-300: #c8c8d8;
  --gray-400: #9898ac;
  --gray-500: #6e6e84;
  --gray-600: #50506a;
  --gray-700: #38384e;
  --gray-800: #1e1e2e;
  --gray-900: #12121e;
  --gray-950: #090910;

  /* ── Fondos & superficies ── */
  --color-bg:              var(--gray-100);
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-border:          var(--gray-200);
  --color-border-subtle:   rgba(0,0,0,.06);

  /* ── Sidebar ── */
  --color-sidebar-bg:          var(--gray-950);
  --color-sidebar-gradient:    linear-gradient(175deg, #0e0e18 0%, var(--gray-950) 100%);
  --color-sidebar-hover:       rgba(255,255,255,.07);
  --color-sidebar-active:      rgba(99, 102, 241, .18);
  --color-sidebar-active-bar:  #818cf8;
  --color-sidebar-text:        var(--gray-400);
  --color-sidebar-text-muted:  var(--gray-600);
  --color-sidebar-icon:        var(--gray-500);
  --color-sidebar-divider:     rgba(255,255,255,.06);
  --color-sidebar-mark-bg:     var(--gray-800);
  --color-sidebar-mark-border: var(--gray-700);

  /* ── Topbar (glassmorphism) ── */
  --color-topbar-bg:       rgba(248, 248, 251, 0.88);
  --color-topbar-border:   rgba(200, 200, 216, 0.55);
  --topbar-blur:           blur(16px);

  /* ── Texto ── */
  --color-text-primary:    var(--gray-900);
  --color-text-secondary:  var(--gray-600);
  --color-text-muted:      var(--gray-400);

  /* ── Tamaños & espaciado (base 4px) ── */
  --sidebar-width-full:  248px;
  --sidebar-rail-width:  64px;
  --topbar-height:       60px;

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

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  /* ── Animación ── */
  --sidebar-transition:  0.22s ease;
  --transition-fast:     0.12s ease;
  --transition-base:     0.2s ease;

  /* ── Tipografía ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:   0.75rem;     /* 12px */
  --font-size-sm:   0.875rem;    /* 14px */
  --font-size-base: 1rem;        /* 16px — mínimo 2026 */
  --font-size-md:   1.0625rem;   /* 17px */
  --font-size-lg:   1.25rem;     /* 20px */
  --font-size-xl:   1.5rem;      /* 24px */
  --font-size-2xl:  1.875rem;   /* 30px */
  --line-height:    1.6;

  /* ── Sombras ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 28px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-peek: 6px 0 40px rgba(0,0,0,.55), 1px 0 0 rgba(255,255,255,.04);

  /* ── Acento (índigo eléctrico) ── */
  --color-accent:        #6366f1;
  --color-accent-hover:  #4f46e5;
  --color-accent-muted:  rgba(99, 102, 241, .10);
  --color-accent-border: rgba(99, 102, 241, .25);
}