/* ================================
   Sky Media - Color Palette
   ================================ */
:root {
    /* === Primary Colors (Azules & Amarillos) === */
    --sky-primary-1: #030d47; /* Azul intenso */
    --sky-primary-1-75: rgba(3, 13, 71, 0.75);
    --sky-primary-1-50: rgba(3, 13, 71, 0.5);
    --sky-primary-2: #023d89; /* Azul medio */
    --sky-primary-2-75: rgba(2, 61, 137, 0.75);
    --sky-primary-2-50: rgba(2, 61, 137, 0.5);
    --sky-primary-3: #ffa100; /* Amarillo intenso */
    --sky-primary-3-75: rgba(255, 161, 0, 0.75);
    --sky-primary-3-50: rgba(255, 161, 0, 0.5);
    --sky-primary-4: #fab707; /* Amarillo medio */
    --sky-primary-4-75: rgba(250, 183, 7, 0.75);
    --sky-primary-4-50: rgba(250, 183, 7, 0.5);
    /* === Secondary Colors (Neutros) === */
    --sky-secondary-1: #3A3A3A; /* Gris oscuro */
    --sky-secondary-2: #E6E6E6; /* Gris claro */
    --sky-secondary-3: #B8B8B8; /* Gris medio */
    /* === Accents & Complementary === */
    --sky-accent-orange: #FF7043; /* Naranja cálido */
    --sky-accent-cyan: #26C6DA; /* Cyan fresco */
    --sky-accent-green: #4CAF50; /* Verde éxito */
    --sky-accent-purple: #673AB7; /* Morado creativo */
    /* === System Colors === */
    --sky-success: #28a745;
    --sky-error: #dc3545;
    --sky-warning: #ffc107;
    --sky-info: #17a2b8;
    /* === Text Colors === */
    --sky-text-dark: #0A0A0A;
    --sky-text-light: #FAFAFA;
    --sky-text-muted: #7A7A7A;
    /* === Transparencies === */
    --sky-black-transparent: rgba(0,0,0,0.45);
    --sky-white-transparent: rgba(255,255,255,0.4);
}

/* ================================
   Typography
   ================================ */
h1, .h1 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--sky-primary-1);
}

h2, .h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--sky-primary-2);
}

h3, .h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--sky-primary-3);
}

.subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--sky-secondary-1);
}

.text-highlight {
    color: var(--sky-primary-3);
    font-weight: bold;
}

.text-muted {
    color: var(--sky-text-muted);
}

/* ================================
   Buttons
   ================================ */
.sky-btn-primary {
    background-color: var(--sky-primary-2);
    border: none;
    color: #fff;
}

    .sky-btn-primary:hover {
        background-color: var(--sky-primary-1);
    }

.sky-btn-accent-yellow {
    background-color: var(--sky-primary-3);
    border: none;
    color: #000;
    font-weight: bold;
}

.sky-btn-accent-orange {
    background-color: var(--sky-accent-orange);
    color: #fff;
}

.sky-btn-accent-cyan {
    background-color: var(--sky-accent-cyan);
    color: #fff;
}

/* ================================
   Backgrounds & Borders
   ================================ */
.sky-bg-primary-1 {
    background-color: var(--sky-primary-1) !important;
}

.sky-bg-primary-2 {
    background-color: var(--sky-primary-2) !important;
}

.sky-bg-primary-3 {
    background-color: var(--sky-primary-3) !important;
}

.sky-bg-primary-4 {
    background-color: var(--sky-primary-4) !important;
}

.sky-bg-secondary-1 {
    background-color: var(--sky-secondary-1) !important;
}

.sky-bg-secondary-2 {
    background-color: var(--sky-secondary-2) !important;
}

.sky-bg-secondary-3 {
    background-color: var(--sky-secondary-3) !important;
}

.sky-border-primary-1 {
    border-color: var(--sky-primary-1) !important;
}

.sky-border-primary-3 {
    border-color: var(--sky-primary-3) !important;
}

/* === Gradient Backgrounds === */
.sky-bg-gradient-1 {
    background: linear-gradient(135deg, var(--sky-primary-1), var(--sky-primary-2));
    color: #fff;
}

.sky-bg-gradient-2 {
    background: linear-gradient(135deg, var(--sky-primary-3), var(--sky-primary-4));
    color: #000;
}

.sky-bg-gradient-3 {
    background: linear-gradient(135deg, var(--sky-accent-cyan), var(--sky-accent-purple));
    color: #fff;
}

/* === Transparent backgrounds === */
.sky-bg-overlay-dark {
    background-color: var(--sky-black-transparent);
}

.sky-bg-overlay-light {
    background-color: var(--sky-white-transparent);
}

/* ================================
   Alerts
   ================================ */
.sky-alert-success {
    background-color: var(--sky-success);
    color: #fff;
}

.sky-alert-error {
    background-color: var(--sky-error);
    color: #fff;
}

.sky-alert-warning {
    background-color: var(--sky-warning);
    color: #000;
}

.sky-alert-info {
    background-color: var(--sky-info);
    color: #fff;
}

/* ================================
   Shadows
   ================================ */
.sky-shadow-soft {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.sky-shadow-strong {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* ================================
   Forms
   ================================ */
.sky-input {
    border: 1px solid var(--sky-secondary-2);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

    .sky-input:focus {
        border-color: var(--sky-primary-2);
        box-shadow: 0 0 6px var(--sky-primary-2-75);
    }

/* ================================
   Modals & Tooltips
   ================================ */
.sky-modal {
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid var(--sky-secondary-2);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.sky-tooltip {
    background-color: var(--sky-primary-2);
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/*


📋 Sky Media - Lista de colores usados

🎨 Primary:
- Azul Intenso → #030d47 → títulos principales, fondos oscuros
- Azul Medio → #023d89 → botones, enlaces
- Amarillo Intenso → #ffa100 → acentos, resaltados
- Amarillo Medio → #fab707 → fondos cálidos, hover

🎨 Secondary:
- Gris Oscuro → #3A3A3A → subtítulos, texto neutro
- Gris Claro → #E6E6E6 → backgrounds suaves
- Gris Medio → #B8B8B8 → bordes, separadores

🌈 Accents:
- Naranja Cálido → #FF7043 → botones alternos, call-to-action
- Cyan Fresco → #26C6DA → enlaces, detalles modernos
- Verde Éxito → #4CAF50 → estados positivos
- Morado Creativo → #673AB7 → énfasis y estilo

⚡ System:
- Success → #28a745
- Error → #dc3545
- Warning → #ffc107
- Info → #17a2b8

🔲 Transparencias:
- Black Transparent → rgba(0,0,0,0.45)
- White Transparent → rgba(255,255,255,0.40)

🎨 Gradientes:
- Gradient-1 → Azul Intenso → Azul Medio
- Gradient-2 → Amarillo Intenso → Amarillo Medio
- Gradient-3 → Cyan → Morado Creativo

👉 Propósito:
Paleta diseñada para **Sky Media - Portafolio**.  
Azules y amarillos como base corporativa, grises para balance, y acentos vivos (cyan, morado, naranja) para dinamismo en secciones como servicios, blogs y contacto.
*/