/* ============================================================
   SCHOOLARYX — CSS Variables
   Todas las variables del tema educativo K-12
   ============================================================ */

:root {
  /* === PALETA PRINCIPAL === */
  --sx-primary:        #ec774b;
  --sx-primary-dark:   #d4603a;
  --sx-primary-light:  #fde8de;
  --sx-primary-rgb:    236, 119, 75;

  --sx-red:            #da5f5f;
  --sx-red-dark:       #c24545;
  --sx-red-light:      #fde8e8;
  --sx-red-rgb:        218, 95, 95;

  --sx-green:          #6fc191;
  --sx-green-dark:     #52a877;
  --sx-green-light:    #e4f5ec;
  --sx-green-rgb:      111, 193, 145;

  --sx-sky:            #74cee4;
  --sx-sky-dark:       #50b8d4;
  --sx-sky-light:      #e3f6fb;
  --sx-sky-rgb:        116, 206, 228;

  --sx-purple:         #c489ce;
  --sx-purple-dark:    #ab6ab8;
  --sx-purple-light:   #f5e8f8;
  --sx-purple-rgb:     196, 137, 206;

  --sx-yellow:         #edbf47;
  --sx-yellow-dark:    #d4a52e;
  --sx-yellow-light:   #fdf5dc;
  --sx-yellow-rgb:     237, 191, 71;

  --sx-dark:           #302f3b;
  --sx-dark-2:         #3d3c4a;
  --sx-dark-3:         #4a4958;
  --sx-dark-rgb:       48, 47, 59;

  /* === COLORES SEMÁNTICOS === */
  --sx-success:        var(--sx-green);
  --sx-success-dark:   var(--sx-green-dark);
  --sx-success-light:  var(--sx-green-light);
  --sx-success-rgb:    var(--sx-green-rgb);

  --sx-warning:        var(--sx-yellow);
  --sx-warning-dark:   var(--sx-yellow-dark);
  --sx-warning-light:  var(--sx-yellow-light);
  --sx-warning-rgb:    var(--sx-yellow-rgb);

  --sx-danger:         var(--sx-red);
  --sx-danger-dark:    var(--sx-red-dark);
  --sx-danger-light:   var(--sx-red-light);
  --sx-danger-rgb:     var(--sx-red-rgb);

  --sx-info:           var(--sx-sky);
  --sx-info-dark:      var(--sx-sky-dark);
  --sx-info-light:     var(--sx-sky-light);
  --sx-info-rgb:       var(--sx-sky-rgb);

  /* === NEUTROS === */
  --sx-white:          #ffffff;
  --sx-body-bg:        #f4f5f8;
  --sx-card-bg:        #ffffff;
  --sx-border-color:   #e8eaf0;
  --sx-text-muted:     #9395a5;
  --sx-text-body:      #4a4a6a;
  --sx-text-heading:   #302f3b;
  --sx-row-hover:      #f0f0f0;

  /* === LAYOUT === */
  --sidebar-width:     260px;
  --sidebar-collapsed: 72px;
  --topbar-height:     75px;
  --navbar-height:     55px;

  /* === BORDER RADIUS === */
  --radius-xs:         4px;
  --radius-sm:         8px;
  --radius:            12px;
  --radius-lg:         16px;
  --radius-xl:         24px;
  --radius-pill:       50px;
  --radius-circle:     50%;

  /* === SOMBRAS === */
  --shadow-xs:   0 1px 3px rgba(48,47,59,0.06);
  --shadow-sm:   0 2px 8px rgba(48,47,59,0.08);
  --shadow:      0 4px 16px rgba(48,47,59,0.10);
  --shadow-lg:   0 8px 32px rgba(48,47,59,0.14);
  --shadow-xl:   0 16px 48px rgba(48,47,59,0.18);

  /* === TIPOGRAFÍA === */
  --font-body:    'Nunito', sans-serif;
  --font-display: 'Roboto', sans-serif;
  --font-mono:    'Fira Code', 'Consolas', monospace;

  /* === TRANSICIONES === */
  --transition:        all 0.25s ease;
  --transition-fast:   all 0.15s ease;
  --transition-slow:   all 0.4s ease;

  /* === GRADIENTES === */
  --gradient-primary:  linear-gradient(135deg, #ec774b 0%, #f0956f 100%);
  --gradient-dark:     linear-gradient(135deg, #302f3b 0%, #4a4958 100%);
  --gradient-success:  linear-gradient(135deg, #6fc191 0%, #8dd4a8 100%);
  --gradient-info:     linear-gradient(135deg, #74cee4 0%, #96dced 100%);

  /* === SIDEBAR === */
  --sidebar-bg:        #302f3b;
  --sidebar-text:      rgba(255,255,255,0.7);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,0.06);
  --sidebar-item-active: var(--sx-primary);
  --sidebar-label-color: rgba(255,255,255,0.35);

  /* === TOPBAR === */
  --topbar-bg:         #ffffff;
  --topbar-border:     #e8eaf0;
  --topbar-icon-color: #6c757d;
}

/* === MODO OSCURO (data-theme="dark") === */
[data-theme="dark"] {
  --sx-body-bg:        #22212c;
  --sx-card-bg:        #2d2c38;
  --sx-border-color:   #3d3c4a;
  --sx-text-muted:     #7a7b8e;
  --sx-text-body:      #c8c9d4;
  --sx-text-heading:   #eaeaf0;
  --sx-row-hover:      #383745;
  --topbar-bg:         #2d2c38;
  --topbar-border:     #3d3c4a;
  --topbar-icon-color: #9395a5;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.2);
  --shadow:      0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.35);
}