/* ============================================
   COLEGIO JOSÉ PARDO - Design System Tokens
   Colorimetría: Tradición + Tecnología
   ============================================ */

:root {
    /* === PRIMARY PALETTE - Navy Blue (Tradición, Confianza, Conocimiento) === */
    --primary-900: #060E29;
    --primary-800: #0A1538;
    --primary-700: #0D1B4A;
    --primary-600: #132A6B;
    --primary-500: #1A3A8C;
    --primary-400: #2E52A8;
    --primary-300: #4A6FC4;
    --primary-200: #7A9ADB;
    --primary-100: #B3C6ED;
    --primary-50: #E4EBF8;

    /* === SECONDARY PALETTE - Teal/Cyan (Tecnología, Innovación) === */
    --secondary-900: #003D36;
    --secondary-800: #00574D;
    --secondary-700: #007A6C;
    --secondary-600: #009E8B;
    --secondary-500: #00BFA6;
    --secondary-400: #26D4BC;
    --secondary-300: #57E3CF;
    --secondary-200: #8FEDE0;
    --secondary-100: #C2F5EE;
    --secondary-50: #E6FBF7;

    /* === ACCENT PALETTE - Gold/Amber (Excelencia, Tradición) === */
    --accent-900: #7A4E00;
    --accent-800: #996200;
    --accent-700: #B87400;
    --accent-600: #D98A00;
    --accent-500: #FFB300;
    --accent-400: #FFC233;
    --accent-300: #FFD166;
    --accent-200: #FFDF99;
    --accent-100: #FFECCC;
    --accent-50: #FFF8E5;

    /* === TECH PALETTE - Linux Mint Green === */
    --mint-900: #2A5218;
    --mint-800: #3A7222;
    --mint-700: #4D952E;
    --mint-600: #63B838;
    --mint-500: #87CF3E;
    --mint-400: #9CDC5E;
    --mint-300: #B3E67F;
    --mint-200: #CCF0A5;
    --mint-100: #E0F7CC;
    --mint-50: #F2FCE8;

    /* === NEUTRAL PALETTE === */
    --neutral-950: #0A0C14;
    --neutral-900: #10131F;
    --neutral-850: #151929;
    --neutral-800: #1A1F33;
    --neutral-700: #252B42;
    --neutral-600: #363E5C;
    --neutral-500: #505A78;
    --neutral-400: #727D9C;
    --neutral-300: #9AA4BE;
    --neutral-200: #C4CBDB;
    --neutral-100: #E2E6EF;
    --neutral-50: #F4F5F9;

    /* === SEMANTIC COLORS === */
    --success: #22C55E;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;

    /* === BACKGROUND SYSTEM === */
    --bg-primary: var(--neutral-950);
    --bg-secondary: var(--neutral-900);
    --bg-tertiary: var(--neutral-850);
    --bg-card: rgba(21, 25, 41, 0.7);
    --bg-card-hover: rgba(26, 31, 51, 0.85);
    --bg-glass: rgba(13, 27, 74, 0.25);
    --bg-glass-heavy: rgba(13, 27, 74, 0.55);

    /* === TEXT SYSTEM === */
    --text-primary: #F4F5F9;
    --text-secondary: #9AA4BE;
    --text-tertiary: #727D9C;
    --text-accent: var(--secondary-400);
    --text-gold: var(--accent-400);

    /* === BORDER SYSTEM === */
    --border-subtle: rgba(154, 164, 190, 0.1);
    --border-default: rgba(154, 164, 190, 0.18);
    --border-active: rgba(0, 191, 166, 0.4);
    --border-gold: rgba(255, 179, 0, 0.3);

    /* === GLASSMORPHISM === */
    --glass-bg: rgba(13, 27, 74, 0.3);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --glass-blur: blur(20px);

    /* === GRADIENTS === */
    --gradient-primary: linear-gradient(135deg, var(--primary-700), var(--primary-500));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-700), var(--secondary-400));
    --gradient-accent: linear-gradient(135deg, var(--accent-600), var(--accent-400));
    --gradient-hero: linear-gradient(165deg, var(--primary-900) 0%, var(--neutral-950) 40%, var(--primary-800) 100%);
    --gradient-card: linear-gradient(145deg, rgba(26, 31, 51, 0.6), rgba(10, 12, 20, 0.8));
    --gradient-glow-teal: radial-gradient(ellipse at center, rgba(0, 191, 166, 0.15), transparent 70%);
    --gradient-glow-gold: radial-gradient(ellipse at center, rgba(255, 179, 0, 0.1), transparent 70%);
    --gradient-mesh: radial-gradient(at 20% 80%, rgba(0, 191, 166, 0.08) 0%, transparent 50%),
                      radial-gradient(at 80% 20%, rgba(255, 179, 0, 0.06) 0%, transparent 50%),
                      radial-gradient(at 50% 50%, rgba(13, 27, 74, 0.3) 0%, transparent 70%);

    /* === TYPOGRAPHY === */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Font Sizes - Fluid */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
    --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
    --text-xl: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    --text-2xl: clamp(1.4rem, 1.2rem + 1vw, 2rem);
    --text-3xl: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem);
    --text-4xl: clamp(2.2rem, 1.6rem + 2.5vw, 3.8rem);
    --text-5xl: clamp(2.8rem, 2rem + 3.5vw, 5rem);

    /* Font Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Line Heights */
    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    /* === SPACING === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* === BORDER RADIUS === */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* === SHADOWS === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-glow-teal: 0 0 30px rgba(0, 191, 166, 0.2);
    --shadow-glow-gold: 0 0 30px rgba(255, 179, 0, 0.15);
    --shadow-glow-primary: 0 0 30px rgba(26, 58, 140, 0.3);

    /* === TRANSITIONS === */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Z-INDEX SCALE === */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;

    /* === CONTAINER === */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
}