/**
 * gestemas - Design System Variables 2.0 (Modular)
 * Sistema Integral de Gestión Neuroeducativa
 */

:root {
  /* ═══════════════════════════════════════════════════════════
     1. COLOR SYSTEM (Neuroinclusivo & Premium)
     ═══════════════════════════════════════════════════════════ */
  
  /* Core Palette */
  --gestemas-primary: #6366f1;
  --gestemas-primary-rgb: 99, 102, 241;
  --gestemas-primary-dark: #4f46e5;
  --gestemas-primary-light: rgba(99, 102, 241, 0.1);
  --gestemas-secondary: #06b6d4;
  --gestemas-secondary-rgb: 6, 182, 212;
  --gestemas-accent: #f59e0b;
  
  /* Semantic Status */
  --gst-success: #10b981;
  --gst-warning: #f59e0b;
  --gst-danger: #ef4444;
  --gst-info: #3b82f6;

  /* Neutrals (Strict Scale) */
  --gst-white: #ffffff;
  --gst-gray-50: #f9fafb;
  --gst-gray-100: #f3f4f6;
  --gst-gray-200: #e5e7eb;
  --gst-gray-300: #d1d5db;
  --gst-gray-400: #71717a;
  --gst-gray-500: #52525b;
  --gst-gray-600: #4b5563;
  --gst-gray-700: #374151;
  --gst-gray-800: #1f2937;
  --gst-gray-900: #111827;

  /* ═══════════════════════════════════════════════════════════
     2. TYPOGRAPHY (Fluid & Optimized - A11y Ready)
     ═══════════════════════════════════════════════════════════ */
  --gst-font-main: 'Inter', system-ui, sans-serif;
  --gst-font-heading: 'Outfit', sans-serif;
  
  /* Fluid Typography Scale (rem based) */
  --gst-fs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --gst-fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --gst-fs-h3: clamp(1.375rem, 3vw, 1.75rem);
  --gst-fs-h4: clamp(1.125rem, 2vw, 1.25rem);
  --gst-fs-base: 1rem;    /* 16px equivalent */
  --gst-fs-sm: 0.875rem;  /* 14px equivalent */
  --gst-fs-xs: 0.75rem;   /* 12px equivalent */
  
  --gst-lh-base: 1.6;
  --gst-lh-tight: 1.2;

  /* ═══════════════════════════════════════════════════════════
     3. SPACING & RADIUS (Modular)
     ═══════════════════════════════════════════════════════════ */
  --gst-gap: clamp(0.75rem, 3vw, 1.5rem);
  --gst-page-padding: clamp(1rem, 5vw, 2.5rem);
  
  --gst-radius-sm: 0.5rem;
  --gst-radius-md: 0.75rem;
  --gst-radius-lg: 1.25rem;
  --gst-radius-full: 9999px;

  --gestemas-mobile-header-height: 4rem;

  /* ═══════════════════════════════════════════════════════════
     4. EFFECTS & DEPTH (Glassmorphism 4.0)
     ═══════════════════════════════════════════════════════════ */
  --gst-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --gst-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --gst-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --gst-shadow-premium: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

  --gst-glass-bg: rgba(255, 255, 255, 0.7);
  --gst-glass-border: 1px solid rgba(255, 255, 255, 0.5);
  --gst-glass-blur: blur(20px) saturate(200%);

  /* ═══════════════════════════════════════════════════════════
     5. DEPTH INDEX (Normalized)
     ═══════════════════════════════════════════════════════════ */
  --z-sidebar: 1000;
  --z-header: 1100;
  --z-fixed-header: 1100;
  --z-overlay: 2000;
  --z-notification: 3000;
  --z-modal: 9000;
  --z-toast: 10000;
}

/* Backward compatibility map & Semantic Aliases */
:root {
  --gestemas-bg: var(--gst-gray-50);
  --text-main: var(--gst-gray-900);
  --text-soft: var(--gst-gray-700);
  --theme-text: var(--gst-gray-900);
  --theme-bg: var(--gst-white);
  --theme-surface: var(--gst-white);
  --theme-border: var(--gst-gray-200);
  
  /* Font Sizes Aliases */
  --fs-h1: var(--gst-fs-h1);
  --fs-h2: var(--gst-fs-h2);
  --fs-h3: var(--gst-fs-h3);
  --fs-base: var(--gst-fs-base);
  --fs-sm: var(--gst-fs-sm);
  
  --gestemas-gray-900: var(--gst-gray-900);
  --gestemas-gray-800: var(--gst-gray-800);
  --gestemas-gray-700: var(--gst-gray-700);
  --gestemas-gray-600: var(--gst-gray-600);
  --gestemas-gray-500: var(--gst-gray-500);
  --gestemas-gray-400: var(--gst-gray-400);
  --gestemas-gray-300: var(--gst-gray-300);
  --gestemas-gray-200: var(--gst-gray-200);
  --gestemas-gray-100: var(--gst-gray-100);
  
  --glass-bg: var(--gst-glass-bg);
  --glass-border: var(--gst-glass-border);
  --glass-blur: 20px;
  --glass-shadow: var(--gst-shadow-lg);
}

/* Micro-Animations Core */
@keyframes gst-fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

.g-fade-up { animation: gst-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Compatibility keyframes used across legacy and migrated modules */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gestemas-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes g-fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dark Theme Persistence */
[data-theme="dark"], .gestemas-dark-mode {
  --gestemas-bg: #0f172a;
  --gst-gray-50: #0f172a;
  --gst-gray-900: #f1f5f9;
  --gst-glass-bg: rgba(15, 23, 42, 0.8);
  --gst-glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY TOKENS (A11y Premium)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Focus States (Strict WCAG) */
  --a11y-focus-ring: 0 0 0 0.25rem rgba(99, 102, 241, 0.5);
  --a11y-focus-ring-offset: 0.125rem;

  /* Font Scale Multiplier (Logic anchor) */
  --a11y-font-scale: 1;

  /* High Contrast Mode */
  --a11y-high-contrast: 0;
}

/* Base Scaling Engine */
html {
  /* This allows us to scale everything by changing a single variable */
  font-size: calc(100% * var(--a11y-font-scale, 1));
}

body {
  font-family: var(--gst-font-main);
  font-size: var(--gst-fs-base);
  line-height: var(--gst-lh-base);
  color: var(--gst-gray-900);
  background: var(--gestemas-bg);
  -webkit-font-smoothing: antialiased;
}

/* High Contrast Mode Override */
[data-high-contrast="true"],
.gestemas-high-contrast {
  --gestemas-primary: #0000ee;
  --gst-success: #008000;
  --gst-danger: #cc0000;
  --theme-text: #000000;
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-border: #000000;
  --theme-border-strong: #000000;
  --a11y-high-contrast: 1;
}

/* Global Scale Applicators */
.gestemas-app h1, .h1 { font-size: var(--gst-fs-h1); font-weight: 800; line-height: var(--gst-lh-tight); font-family: var(--gst-font-heading); }
.gestemas-app h2, .h2 { font-size: var(--gst-fs-h2); font-weight: 700; line-height: var(--gst-lh-tight); font-family: var(--gst-font-heading); }
.gestemas-app h3, .h3 { font-size: var(--gst-fs-h3); font-weight: 700; line-height: var(--gst-lh-tight); font-family: var(--gst-font-heading); }
.gestemas-app h4, .h4 { font-size: var(--gst-fs-h4); font-weight: 600; line-height: var(--gst-lh-tight); }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gestemas-transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}