/* Definición de la arquitectura de capas CSS */
@layer reset, base, layout, components;

@layer reset {
    *, *::before, *::after { 
        box-sizing: border-box; 
        margin: 0; 
        padding: 0; 
    }
    html { 
        font-size: 16px; 
        font-family: system-ui, -apple-system, sans-serif; 
    }
}

@layer base {
    :root {
        /* Paleta basada en OKLCH para colores vibrantes y accesibles */
        --bg-color: oklch(98% 0.01 250);
        --text-color: oklch(20% 0.02 250);
        --primary: oklch(60% 0.25 280);
        color-scheme: light dark;
    }
    
    /* Adaptación nativa al modo oscuro del sistema del usuario */
    @media (prefers-color-scheme: dark) {
        :root {
            --bg-color: oklch(15% 0.02 250);
            --text-color: oklch(95% 0.01 250);
        }
    }
    
    body {
        background-color: var(--bg-color);
        color: var(--text-color);
        min-height: 100dvh; 
        display: grid;
        place-items: center;
        transition: background-color 0.4s ease, color 0.4s ease;
    }
}

@layer layout {
    .coming-soon-container {
        max-width: 800px;
        padding: 2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 3.5rem;

        /* Anidamiento nativo CSS */
        & header {
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: -0.05em;
        }
    }
}

@layer components {
    .hero {
        & h1 {
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            background: linear-gradient(to right, var(--primary), oklch(70% 0.2 320));
            -webkit-background-clip: text;
            color: transparent;
            margin-bottom: 1.25rem;
            text-wrap: balance; /* Tipografía perfecta en cualquier resolución */
        }
        
        & p {
            font-size: 1.25rem;
            opacity: 0.8;
            text-wrap: pretty; 
            max-width: 60ch;
            margin: 0 auto;
        }
    }

    .countdown {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin-top: 2.5rem;
        font-variant-numeric: tabular-nums; /* Evita que los números "salten" al cambiar */
        
        & div {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.875rem;
            opacity: 0.8;
            
            & strong {
                font-size: 2.5rem;
                font-weight: 700;
                color: var(--primary);
                line-height: 1;
                margin-bottom: 0.25rem;
            }
        }
    }

    form {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        flex-wrap: wrap;

        & input {
            padding: 0.875rem 1.5rem;
            /* Función color-mix() nativa */
            border: 1px solid color-mix(in oklch, var(--text-color) 20%, transparent);
            border-radius: 9999px;
            background: transparent;
            color: inherit;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;

            &:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 30%, transparent);
            }
        }

        & button {
            padding: 0.875rem 2rem;
            border: none;
            border-radius: 9999px;
            background-color: var(--primary);
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: filter 0.2s ease, transform 0.1s ease;

            &:hover {
                filter: brightness(1.1);
            }
            &:active {
                transform: scale(0.98);
            }
        }
    }
}