/* Epelcat — Design tokens (Soft UI Evolution) */

:root {
  /* Tipografía */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', Georgia, serif;

  /* Tamaños */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;

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

  /* Radios */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-full: 2px;

  /* Sombras suaves (Soft UI) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.09), 0 4px 8px rgba(0,0,0,.05);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.11), 0 6px 16px rgba(0,0,0,.06);

  /* Transiciones */
  --ease:      cubic-bezier(.25,.46,.45,.94);
  --trans-fast:   150ms var(--ease);
  --trans-normal: 250ms var(--ease);
  --trans-slow:   350ms var(--ease);

  /* Layout */
  --sidebar-width:   240px;
  --sidebar-collapsed: 60px;
  --topbar-height:   60px;
  --content-max:     1280px;

  /* Alias usados en JS */
  --sidebar-w: 240px;
  --topbar-h:  60px;
  --trans-base: 250ms var(--ease);
  --font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  /* Z-index */
  --z-sidebar:  100;
  --z-topbar:   200;
  --z-dropdown: 300;
  --z-modal:    400;
  --z-toast:    500;

  /* === LIGHT MODE === */
  --bg:          #F7F6F3;
  --surface:     #FFFFFF;
  --surface-2:   #FAFAF8;
  --surface-3:   #F2F1EE;
  --border:      rgba(0,0,0,.08);
  --border-md:   rgba(0,0,0,.13);
  --border-strong: rgba(0,0,0,.20);

  --text-primary:   #18171A;
  --text-secondary: #5C5961;
  --text-tertiary:  #9895A0;
  --text-inverse:   #FFFFFF;

  --primary:        #00AEEF;
  --primary-hover:  #006390;
  --primary-dark:   #006390;
  --primary-light:  #E6F6FD;
  --primary-text:   #006390;

  --success:        #059669;
  --success-light:  #ECFDF5;
  --success-text:   #065F46;

  --warning:        #D97706;
  --warning-light:  #FFFBEB;
  --warning-text:   #92400E;

  --danger:         #DC2626;
  --danger-light:   #FEF2F2;
  --danger-text:    #991B1B;

  --info:           #2563EB;
  --info-light:     #EFF6FF;
  --info-text:      #1D4ED8;

  --sidebar-bg:     #FFFFFF;
  --sidebar-text:   #5C5961;
  --sidebar-active-bg: #E6F6FD;
  --sidebar-active-text: #006390;
  --sidebar-hover-bg: #F2F1EE;
}

[data-theme="dark"] {
  --bg:          #0F0F12;
  --surface:     #1C1B20;
  --surface-2:   #232228;
  --surface-3:   #2A2930;
  --border:      rgba(255,255,255,.09);
  --border-md:   rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.24);

  --text-primary:   #E8E6F0;
  --text-secondary: #A8A5B4;
  --text-tertiary:  #6B6878;
  --text-inverse:   #0F0F12;

  --primary:        #00AEEF;
  --primary-hover:  #29C0FF;
  --primary-dark:   #006390;
  --primary-light:  #00364D;
  --primary-text:   #7DDCF9;

  --success:        #0FCF8A;
  --success-light:  #01271A;
  --success-text:   #5FDDAF;

  --warning:        #F5A623;
  --warning-light:  #2A1A00;
  --warning-text:   #FCD060;

  --danger:         #F05252;
  --danger-light:   #2A0808;
  --danger-text:    #F98080;

  --info:           #3B82F6;
  --info-light:     #0A1833;
  --info-text:      #93C5FD;

  --sidebar-bg:     #161519;
  --sidebar-text:   #A8A5B4;
  --sidebar-active-bg:   #00364D;
  --sidebar-active-text: #29C0FF;
  --sidebar-hover-bg:    #232228;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.65), 0 4px 8px rgba(0,0,0,.4);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.75), 0 6px 16px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}