/* ==========================================================================
   ENTROPY SHOPIFY - VARIABLES & DESIGN SYSTEM (FOUNDATIONS)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    /* --- COLOR PALETTE --- */
    --color-blanco: #FFFFFF;
    --color-blanco-hover: #E5E5E5;
    --color-negro: #1A1A1A;
    --color-negro-hover: #2F2F2F;
    --color-cian-aquoso: #00A4AA;
    --color-cian-aquoso-hover: #017B7E;

    /* Semantic Colors default (Dark Mode) */
    --bg-primary: #0E0F11; /* From modo_oscuro.html */
    --bg-sidebar: #131415;
    --text-primary: #EDEDED;
    --text-secondary: #A1A1AA;
    --text-muted: #71717A;
    --accent: var(--color-cian-aquoso);
    --accent-hover: var(--color-cian-aquoso-hover);
    --accent-bg: rgba(0, 164, 170, 0.1);
    
    --border-color: rgba(255, 255, 255, 0.08);
    --hover-bg: rgba(255, 255, 255, 0.04);

    /* --- TRANSITIONS --- */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-gentle: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- TYPOGRAPHY (PC - Default >= 1024px) --- */
    --font-heading: 'Barlow', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Headings PC */
    --h0-font-size: 96px; --h0-font-weight: 700; --h0-line-height: 100%; --h0-letter-spacing: -0.96px;
    --h1-font-size: 64px; --h1-font-weight: 700; --h1-line-height: 110%; --h1-letter-spacing: -0.64px;
    --h2-font-size: 48px; --h2-font-weight: 700; --h2-line-height: 120%; --h2-letter-spacing: -0.48px;
    --h3-font-size: 32px; --h3-font-weight: 600; --h3-line-height: 120%; --h3-letter-spacing: normal;
    --h4-font-size: 24px; --h4-font-weight: 600; --h4-line-height: 120%; --h4-letter-spacing: normal;

    /* Body Texts PC */
    --p-large-font-size: 20px; --p-large-font-weight: 400; --p-large-line-height: 150%;
    --p-font-size: 18px; --p-font-weight: 400; --p-line-height: 150%;
    --btn-font-size: 18px; --btn-font-weight: 500; --btn-line-height: 100%;
    --caption-font-size: 14px; --caption-font-weight: 400; --caption-line-height: 140%;
}

/* --- TYPOGRAPHY (Mobile/Tablet < 1024px) --- */
@media (max-width: 1023px) {
    :root {
        --h0-font-size: 48px; --h0-letter-spacing: -0.48px;
        --h1-font-size: 40px; --h1-letter-spacing: -0.4px;
        --h2-font-size: 32px; --h2-letter-spacing: -0.32px;
        --h3-font-size: 24px;
        --h4-font-size: 20px;
        --p-large-font-size: 18px;
        --p-font-size: 16px;
        --btn-font-size: 16px;
        --caption-font-size: 14px;
    }
}