/**
 * Edukaland Design Tokens
 * Generado a partir de variables de Figma
 */

:root {
    /* Brand Colors - Primary */
    --color-primary-50: #fcf5f4;
    --color-primary-100: #fbe3e0;
    --color-primary-150: #f6bfc8;
    --color-primary-200: #ff8aad;
    --color-primary-300: #f66691;
    --color-primary-400: #f63876;
    --color-primary-500: #e9004c;
    --color-primary-600: #c0003e;
    --color-primary-700: #960031;
    --color-primary-800: #6c0023;
    --color-primary-900: #430016;

    /* Brand Colors - Secondary */
    --color-secondary-50: #f4fdf5;
    --color-secondary-100: #e5fbe6;
    --color-secondary-150: #cef3d1;
    --color-secondary-200: #a9eaae;
    --color-secondary-300: #83e58b;
    --color-secondary-400: #53cd5d;
    --color-secondary-500: #00af41;
    --color-secondary-600: #00732b;
    --color-secondary-700: #005520;
    --color-secondary-800: #003715;
    --color-secondary-900: #002a10;

    /* Neutrals White */
    --color-white: #ffffff;
    
    /* Neutrals - Grey */
    --color-grey-0: #ffffff;
    --color-grey-50: #f4f4f4;
    --color-grey-100: #ecebeb;
    --color-grey-150: #e0dddf;
    --color-grey-200: #cdc9cb;
    --color-grey-300: #b9b3b5;
    --color-grey-400: #8b8788;
    --color-grey-500: #787475;
    --color-grey-600: #595657;
    --color-grey-700: #4a4848;
    --color-grey-800: #2c2a2a;
    --color-grey-900: #1c1b1c;

    /* Neutrals - Cream */
    --color-cream-50: #f9f9f3;
    --color-cream-100: #f5f4e9;
    --color-cream-150: #f4f2d9;
    --color-cream-200: #f3efb9;

    /* Feedback */
    --color-info-200: #c7e7fb;
    --color-info-500: #0576c1;
    --color-info-800: #154c71;
    --color-success-200: #c5faea;
    --color-success-500: #089369;
    --color-success-800: #054632;
    --color-warning-200: #faebc4;
    --color-warning-500: #cd9811;
    --color-warning-800: #735916;
    --color-error-200: #fcdadf;
    --color-error-500: #cd1130;
    --color-error-800: #7a0e20;

    /* Spacing */
    --space-0: 0px;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-104: 104px;
    --space-128: 128px;

    /* Border Radius */
    --radius-0: 0px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-24: 24px;

    /* Border Width */
    --border-0: 0px;
    --border-1: 1px;
    --border-2: 2px;

    /* Elevations / Shadows */
    --elevation-4: 0px 5px 0px var(--color-grey-900); /* Hard shadow type */
    --elevation-3: 0px 9px 12.7px rgba(0, 0, 0, 0.05); /* Soft shadow type */
    --elevation-2: 0px 2px 0px var(--color-grey-900); /* Hard shadow type */

    /* Type Scale - Font Sizes & Line Heights */
    --fs-h1: 66px;
    --lh-h1: 78px;
    --fs-h2: 42px;
    --lh-h2: 52px;
    --fs-h3: 34px;
    --lh-h3: 40px;
    --fs-h4: 27px;
    --lh-h4: 35px;
    --fs-h5: 22px;
    --lh-h5: 32px;
    --fs-h6: 18px;
    --lh-h6: 24px;
    --fs-xl: 18px;
    --lh-xl: 24px;
    --fs-lg: 22px;
    --lh-lg: 32px;
    --fs-l: 18px;
    --lh-l: 24px;
    --fs-m: 16px;
    --lh-m: 24px;
    --fs-s: 12px;
    --lh-s: 16px;

    /* Font Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* Semantic Aliases */
    --font-main: 'Gotham Rounded', sans-serif;
    --primary: var(--color-primary-500);
    --secondary: var(--color-secondary-500);
    --text-main: var(--color-grey-900);
    --text-muted: var(--color-grey-500);
    --bg-body: var(--color-cream-100);
}

body, button, input, select, textarea, a {
    font-family: var(--font-main);
    color: var(--color-grey-900);
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-main);
    margin: 0;
    line-height: 1.5;
    /* min-block-size: 100svh; */
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;

    @media (max-width: 1440px) {
        padding: 0 var(--space-80);

    }

    @media (max-width: 1160px) {
        padding: 0 var(--space-24);
    }

    @media (max-width: 680px) {
        padding: 0 var(--space-16);
    }
}

.pink-color {
    color: var(--primary);
}


/* Global Helpers */
.has-border-top {
    border-top: 1px solid var(--color-grey-900) !important;
}

.has-border-bottom {
    border-bottom: 1px solid var(--color-grey-900) !important;
}

.aviso-legal-container {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 40px;

    .wp-block-group__inner-container {
        padding-block: 104px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    @media (max-width: 1440px) {
        padding-inline: var(--space-80);
    }

    @media (max-width: 1160px) {
        padding-inline: var(--space-24);
    }

    @media (max-width: 680px) {
        padding-inline: var(--space-16);

        /* A 66px las palabras largas del título no caben y provocan scroll horizontal */
        h1 {
            font-size: var(--fs-h3);
            line-height: var(--lh-h3);
        }
    }
}