/* ========================================
   DESIGN TOKENS - SISTEMA DE DISEÑO
   Portafolio Matteo Villablanca
   ======================================== */

:root {
    /* ========================================
       COLORES - PALETA PRIMARIA
       ======================================== */
    
    /* Brand Colors */
    --color-primary: #339998;
    --color-primary-light: #78d0ca;
    --color-primary-lighter: #aae5df;
    --color-primary-dark: #267b7b;
    --color-primary-darker: #1f4f50;
    
    /* Accent Colors */
    --color-accent: #339998;
    --color-accent-hover: #267b7b;
    
    /* ========================================
       COLORES - SEMÁNTICOS
       ======================================== */
    
    /* Text Colors */
    --color-text-primary: #1e4243;      /* Texto principal oscuro */
    --color-text-secondary: #555555;    /* Texto secundario */
    --color-text-tertiary: #888888;     /* Texto terciario/auxiliar */
    --color-text-muted: #999999;        /* Texto deshabilitado */
    --color-text-inverse: #ffffff;      /* Texto sobre fondos oscuros */
    
    /* Background Colors */
    --color-bg-primary: #ffffff;        /* Fondo principal */
    --color-bg-secondary: #f5f7fa;      /* Fondo secundario */
    --color-bg-tertiary: #f0f0f0;       /* Fondo terciario */
    --color-bg-code: #f5f5f5;           /* Fondo de código */
    --color-bg-dark: #2c3e50;           /* Fondo oscuro */
    --color-bg-dark-alt: #1a252f;       /* Fondo oscuro alternativo */
    
    /* Border Colors */
    --color-border-light: #e0e0e0;
    --color-border: #cccccc;
    --color-border-dark: #999999;
    
    /* State Colors */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f7b731;
    --color-warning-light: #fef3c7;
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    
    /* Social Media Colors */
    --color-linkedin: #0077b5;
    --color-github: #333333;
    --color-discord: #5865f2;
    
    /* ========================================
       GRADIENTES
       ======================================== */
    
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --gradient-background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --gradient-dark: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-dark-alt) 100%);
    --gradient-text: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    
    /* ========================================
       TIPOGRAFÍA
       ======================================== */
    
    /* Font Family */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-code: 'Fira Code', 'Courier New', monospace;
    
    /* Font Sizes - Escala Modular (Ratio 1.250 - Mayor Tercera) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    
    /* ========================================
       ESPACIADO - 8pt Grid System
       ======================================== */
    
    --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-7: 1.75rem;      /* 28px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    --space-32: 8rem;        /* 128px */
    
    /* ========================================
       SOMBRAS - Elevación
       ======================================== */
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.09);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.12);
    
    /* Sombras de Color */
    --shadow-primary: 0 4px 12px rgba(51, 153, 152, 0.3);
    --shadow-primary-lg: 0 8px 24px rgba(51, 153, 152, 0.4);
    
    /* ========================================
       BORDES
       ======================================== */
    
    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius-base: 0.375rem; /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;   /* Círculo completo */
    
    /* Border Width */
    --border-0: 0;
    --border-1: 1px;
    --border-2: 2px;
    --border-4: 4px;
    
    /* ========================================
       BREAKPOINTS - Mobile First
       ======================================== */
    
    --breakpoint-xs: 375px;   /* Mobile small */
    --breakpoint-sm: 640px;   /* Mobile large */
    --breakpoint-md: 768px;   /* Tablet portrait */
    --breakpoint-lg: 1024px;  /* Tablet landscape / Small desktop */
    --breakpoint-xl: 1280px;  /* Desktop */
    --breakpoint-2xl: 1536px; /* Large desktop */
    
    /* ========================================
       TRANSICIONES Y ANIMACIONES
       ======================================== */
    
    /* Duration */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-medium: 300ms;
    --duration-slow: 500ms;
    
    /* Timing Functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Transitions completas */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-base: all var(--duration-base) var(--ease-in-out);
    --transition-medium: all var(--duration-medium) var(--ease-in-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);
    
    /* ========================================
       Z-INDEX - Gestión de capas
       ======================================== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ========================================
       LAYOUT
       ======================================== */
    
    /* Container Max Width */
    --container-xs: 480px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* Header Height */
    --header-height: 70px;
    --header-height-mobile: 60px;
    
    /* ========================================
       COMPONENTES ESPECÍFICOS
       ======================================== */
    
    /* Buttons */
    --btn-padding-sm: var(--space-2) var(--space-4);
    --btn-padding-base: var(--space-3) var(--space-6);
    --btn-padding-lg: var(--space-4) var(--space-8);
    
    /* Cards */
    --card-padding: var(--space-6);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-base);
    --card-shadow-hover: var(--shadow-xl);
    
    /* Forms */
    --input-padding: var(--space-3) var(--space-4);
    --input-border: var(--border-2) solid var(--color-border);
    --input-border-focus: var(--border-2) solid var(--color-primary);
    --input-radius: var(--radius-md);
    
    /* Navigation */
    --nav-link-padding: var(--space-3) var(--space-4);
    --nav-gap: var(--space-2);
    
    /* ========================================
       UTILIDADES
       ======================================== */
    
    /* Opacity */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.8;
    
    /* Backdrop */
    --backdrop-blur: blur(10px);
    --backdrop-color: rgba(0, 0, 0, 0.5);
}

/* ========================================
   MODO OSCURO - DARK MODE
   ======================================== */

[data-theme="dark"] {
    /* Background Colors - Dark */
    --color-bg-primary: #0f172a;           /* Fondo principal oscuro */
    --color-bg-secondary: #1e293b;         /* Fondo secundario oscuro */
    --color-bg-tertiary: #334155;          /* Fondo terciario oscuro */
    --color-bg-code: #1e293b;              /* Fondo de código oscuro */
    --color-bg-dark: #0f172a;              /* Ya es oscuro */
    --color-bg-dark-alt: #020617;          /* Más oscuro aún */
    
    /* Text Colors - Dark */
    --color-text-primary: #f1f5f9;         /* Texto principal claro */
    --color-text-secondary: #cbd5e1;       /* Texto secundario claro */
    --color-text-tertiary: #94a3b8;        /* Texto terciario */
    --color-text-muted: #64748b;           /* Texto deshabilitado */
    --color-text-inverse: #0f172a;         /* Texto sobre fondos claros */
    
    /* Primary Colors mantienen el branding pero ajustados */
    --color-primary: #4adebd;              /* Más brillante para contraste */
    --color-primary-light: #8eecd7;
    --color-primary-lighter: #aae5df;
    --color-primary-dark: #2bb89d;
    --color-accent: #4adebd;
    --color-accent-hover: #2bb89d;
    
    /* Border Colors - Dark */
    --color-border-light: #334155;
    --color-border: #475569;
    --color-border-dark: #64748b;
    
    /* State Colors ajustados para dark mode */
    --color-success: #22c55e;
    --color-success-light: #166534;
    --color-warning: #fbbf24;
    --color-warning-light: #713f12;
    --color-error: #f87171;
    --color-error-light: #7f1d1d;
    --color-info: #60a5fa;
    --color-info-light: #1e3a8a;
    
    /* Gradientes ajustados */
    --gradient-background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --gradient-dark: linear-gradient(135deg, #020617 0%, #0f172a 100%);
    
    /* Sombras más sutiles en dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.8);
    --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.9);
    
    /* Sombras de Color en dark */
    --shadow-primary: 0 4px 12px rgba(74, 222, 189, 0.2);
    --shadow-primary-lg: 0 8px 24px rgba(74, 222, 189, 0.3);
}

/* Respeta preferencia del sistema por defecto */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Background Colors - Dark */
        --color-bg-primary: #0f172a;
        --color-bg-secondary: #1e293b;
        --color-bg-tertiary: #334155;
        --color-bg-code: #1e293b;
        
        /* Text Colors - Dark */
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-text-tertiary: #94a3b8;
        --color-text-muted: #64748b;
        --color-text-inverse: #0f172a;
        
        /* Primary Colors */
        --color-primary: #4adebd;
        --color-primary-light: #8eecd7;
        --color-accent: #4adebd;
        
        /* Border Colors */
        --color-border-light: #334155;
        --color-border: #475569;
        --color-border-dark: #64748b;
        
        /* Gradientes */
        --gradient-background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        
        /* Sombras */
        --shadow-primary: 0 4px 12px rgba(74, 222, 189, 0.2);
    }
}

/* ========================================
   CLASES UTILITARIAS BASADAS EN TOKENS
   ======================================== */

/* Spacing Utilities */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.gap-sm { gap: var(--space-4); }
.gap-md { gap: var(--space-8); }
.gap-lg { gap: var(--space-16); }

/* Text Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

/* Background Utilities */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Border Radius Utilities */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Container */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

/* Visually Hidden (A11y) */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus Visible Global */
*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}