/**
 * Variables de diseño — Gestionarte Plataforma
 *
 * Dos bloques claramente separados:
 * 1. BRAND: colores que el colegio puede sobreescribir desde system_config
 * 2. SYSTEM: colores, tipografía y layout fijos, nunca cambian por colegio
 */

:root {
  /* ═══════════════════════════════════════════════════════════
     BRAND — Overridable por cada colegio
     Valores default = paleta de Gestionarte plataforma
     ═══════════════════════════════════════════════════════════ */

  --color-brand-primary: #4338ca;           /* Índigo 700 */
  --color-brand-primary-hover: #3730a3;     /* Índigo 800 */
  --color-brand-primary-light: #e0e7ff;     /* Índigo 100 (fondos suaves) */
  --color-brand-primary-contrast: #ffffff;  /* Texto sobre primary */

  --color-brand-secondary: #0891b2;         /* Cian 700 */
  --color-brand-secondary-hover: #0e7490;   /* Cian 800 */
  --color-brand-secondary-light: #cffafe;   /* Cian 100 */
  --color-brand-secondary-contrast: #ffffff;

  --color-brand-tertiary: #7c3aed;          /* Violeta 600 */
  --color-brand-tertiary-hover: #6d28d9;    /* Violeta 700 */
  --color-brand-tertiary-light: #ede9fe;    /* Violeta 100 */
  --color-brand-tertiary-contrast: #ffffff;

  /* ═══════════════════════════════════════════════════════════
     SYSTEM — Fijos, nunca cambian por colegio
     ═══════════════════════════════════════════════════════════ */

  /* Escala de grises (Slate de Tailwind) */
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  /* Fondos y superficies */
  --color-bg:            #ffffff;
  --color-bg-subtle:     #f8fafc;
  --color-bg-muted:      #f1f5f9;
  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Texto */
  --color-text-primary:   #0f172a;  /* Texto principal */
  --color-text-secondary: #475569;  /* Texto secundario */
  --color-text-muted:     #94a3b8;  /* Texto deshabilitado / placeholders */
  --color-text-inverse:   #ffffff;  /* Texto sobre fondos oscuros */

  /* Sidebar (fijo — no se personaliza por colegio) */
  --color-sidebar-bg:          #1e293b;  /* Slate 800 */
  --color-sidebar-bg-hover:    #334155;  /* Slate 700 */
  --color-sidebar-bg-active:   #4338ca;  /* = brand-primary (se actualiza con branding) */
  --color-sidebar-text:        #cbd5e1;  /* Slate 300 */
  --color-sidebar-text-hover:  #f1f5f9;  /* Slate 100 */
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-separator:   #94a3b8;  /* Texto de separadores de módulo (ÓRBITA, PRISMA, etc.) */

  /* Semánticos */
  --color-success:         #10b981;  /* Emerald 500 */
  --color-success-light:   #d1fae5;
  --color-success-dark:    #047857;

  --color-warning:         #f59e0b;  /* Amber 500 */
  --color-warning-light:   #fef3c7;
  --color-warning-dark:    #b45309;

  --color-danger:          #ef4444;  /* Red 500 */
  --color-danger-light:    #fee2e2;
  --color-danger-dark:     #b91c1c;

  --color-info:            #3b82f6;  /* Blue 500 */
  --color-info-light:      #dbeafe;
  --color-info-dark:       #1d4ed8;

  /* ═══════════════════════════════════════════════════════════
     TIPOGRAFÍA
     ═══════════════════════════════════════════════════════════ */

  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Tamaños de fuente */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  1.875rem;  /* 30px */
  --font-size-3xl:  2.25rem;   /* 36px */

  /* Pesos */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Alturas de línea */
  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* ═══════════════════════════════════════════════════════════
     ESPACIADO (escala 4px base)
     ═══════════════════════════════════════════════════════════ */

  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */

  /* ═══════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════ */

  --radius-sm:   0.25rem;  /*  4px */
  --radius-md:   0.375rem; /*  6px */
  --radius-lg:   0.5rem;   /*  8px */
  --radius-xl:   0.75rem;  /* 12px */
  --radius-2xl:  1rem;     /* 16px */
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════
     SOMBRAS
     ═══════════════════════════════════════════════════════════ */

  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* ═══════════════════════════════════════════════════════════
     TRANSICIONES
     ═══════════════════════════════════════════════════════════ */

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ═══════════════════════════════════════════════════════════
     LAYOUT (dimensiones estructurales)
     ═══════════════════════════════════════════════════════════ */

  --sidebar-width:          260px;
  --sidebar-width-collapsed: 64px;
  --header-height:          64px;
  --container-max-width:    1280px;

  /* ═══════════════════════════════════════════════════════════
     Z-INDEX (escala explícita para evitar guerras de z-index)
     ═══════════════════════════════════════════════════════════ */

  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-sidebar:   1030;
  --z-header:    1040;
  --z-modal:     1050;
  --z-toast:     1060;
  --z-tooltip:   1070;
}