@font-face {
    font-family: "Departure Mono";
    src: url("../fonts/DepartureMono/DepartureMono-Regular.woff") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/Space_Grotesk/static/SpaceGrotesk-Regular.ttf") format("truetype");
}

/* Root normal (Modo oscuro) */
:root {
    /* Tipografías */
    --font-departure: "Departure Mono", monospace;
    --font-family: "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;

    /* Tamaños base */
    --font-size-base: 16px;
    --font-size-title: 2.5rem;
    --font-size-subtitle: 1.8rem;
    --font-size-text: 1rem;

    /* Colores */
    --color-bg-principal: #282725;
    --color-bg-secundario: #111111;
    --color-bg-secundario-op: #1111119d;
    --color-bg-tarjetas: #343330;

    --color-texto-principal: #ffffff;
    --color-texto-secundario: #d8d8d8;
    --color-texto-encabezados: #ff3b3b;

    --color-borde-principal: #1111119d;
    --color-borde-secundario: #777777;
    
    /* Bordes */
    --borde-radio: 8px;

    --borde-principal-1: 1px solid var(--color-borde-principal);
    --borde-secundario-1: 1px solid var(--color-borde-secundario);
    --borde-principal-2: 2px solid var(--color-borde-principal);
    --borde-secundario-2: 2px solid var(--color-borde-secundario);

    /* Sombras */
    --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 6px 18px rgba(0, 0, 0, 0.1);
    --sombra-grave: 0 18px 40px rgba(0, 0, 0, 0.493);

    /* Medidas */
    --medida-ancho: 80%;
}

/* Modo claro */
html.light-mode {
    --color-bg-principal: #f5f5f5;
    --color-bg-secundario: #ffffff;
    --color-bg-secundario-op: rgba(255,255,255,0.6);
    --color-bg-tarjetas: #efefef;

    --color-texto-principal: #111111;
    --color-texto-secundario: #4a4a4a;
    --color-texto-encabezados: #ff3b3b;

    --color-borde-principal: #e0e0e0;
    --color-borde-secundario: #bdbdbd;
}

/* Formatos */
.departure {
    font-family: var(--font-departure);
    font-size: 1.3rem;
    font-weight: 300;
}


/* 🟩🟩 ↓ RESPONSIVE ↓ 🟩🟩 */

/* Tablets */
@media (max-width: 992px) {
    :root {
        --font-size-title: 2.1rem;
        --font-size-subtitle: 1.6rem;
        --font-size-text: 0.95rem;
        --medida-ancho: 90%;
    }
}

/* Móviles grandes */
@media (max-width: 768px) {
    :root {
        --font-size-title: 1.9rem;
        --font-size-subtitle: 1.4rem;
        --font-size-text: 0.9rem;
        --medida-ancho: 95%;
    }

    .departure {
        font-size: 1.15rem;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    :root {
        --font-size-title: 1.6rem;
        --font-size-subtitle: 1.2rem;
        --font-size-text: 0.85rem;
        --medida-ancho: 98%;
    }

    .departure {
        font-size: 1rem;
    }
}