/* Google Fonts Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Poppins:wght@300;400;600;700&family=Playfair+Display:wght@700;900&family=JetBrains+Mono&display=swap');

:root {
    /* ==========================================================================
       1. COLOR PALETTES (THEMES)
       Select a palette by uncommenting it or overriding these variables.
       ========================================================================== */

    /* --- Default Palette: Modern Tech (Indigo/Purple) --- */
    --primary: #6366f1;       /* Indigo 500 */
    --primary-dark: #4f46e5;  /* Indigo 600 */
    --secondary: #ec4899;     /* Pink 500 */
    --accent: #06b6d4;        /* Cyan 500 */
    
    --grad-primary: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --grad-ocean: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --grad-fire: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);

    /* Status Colors (Universal) */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    /* Spacing & Sizing */
    --section-padding: 5rem 2rem;
    --container-max: 1200px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    
    /* Typography */
    --font-main: 'Inter', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-mono: 'JetBrains Mono', monospace;
    --line-height: 1.6;
}

/* ==========================================================================
   2. STRUCTURAL THEMES (Dark vs Light Mode)
   Controls backgrounds, text colors, and glass effects.
   ========================================================================== */

/* Dark Theme (Default) */
:root {
    --bg-body: #ff0000;  /* Cambiado a rojo */
    --bg-surface: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    
    /* Glass Effect - Dark */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: 12px;
    --nav-bg: rgba(15, 23, 42, 0.9);
}

/* Light Theme */
[data-theme="light"] {
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    
    /* Glass Effect - Light */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-blur: 15px;
    --nav-bg: rgba(255, 255, 255, 0.9);
    
    /* Brand Colors Adaptation for Light Mode (Optional - increases contrast if needed) */
    /* You can override brand colors here specifically for light mode if they are too bright */
    /* --primary: #4f46e5; (Darker shade of indigo for better text contrast on white) */
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; outline: none; }
html { scroll-behavior: smooth; }

body { 
    font-family: var(--font-main); 
    line-height: var(--line-height); 
    background: var(--bg-body); 
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s ease, color 0.3s ease;
}

/* --- Layout Engine --- */
.container { 
    max-width: var(--container-max); 
    margin: 0 auto; 
    padding: 0 1.5rem; 
}