/* ==========================================
   Design System & CSS Variables - I.E.S. Santa Mónica
   ========================================== */

/* Font Definitions */
@font-face {
    font-family: 'Ltsaeada';
    src: url('../fonts/LTSaeada-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ltsaeada';
    src: url('../fonts/LTSaeada-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ltsaeada';
    src: url('../fonts/LTSaeada-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ltsaeada';
    src: url('../fonts/LTSaeada-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Color Palette */
    --color-primary: #082e59;
    --color-primary-dark: #051d38;
    --color-primary-light: #0d427d;
    --color-accent: #ffc400;
    --color-accent-hover: #e6b000;
    --color-accent-light: #fff8e1;

    --color-white: #ffffff;
    --color-text-heading: #082e59;
    --color-text-body: #252525;
    --color-muted: #6f6f6f;
    --color-light-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-border: #e4e4e4;
    --color-border-light: #f0f0f0;

    /* Typography */
    --font-heading: 'Ltsaeada', 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;

    /* Border Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 15px 35px rgba(8, 46, 89, 0.15);

    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-normal: 300ms ease;

    /* Container Width */
    --container-width: 1180px;
}