/* =========================================================
   MASTER CARE INTERNATIONAL SCHOOL
   DESIGN SYSTEM / COLOR VARIABLES
   ========================================================= */

:root {

    /* =========================
       GREEN FAMILY
       ========================= */

    --green-950: #03170D;
    --green-900: #062B18;
    --green-700: #0B6B3A;
    --green-500: #16A34A;
    --green-400: #34D67A;


    /* =========================
       LIGHT / PLATINUM
       ========================= */

    --mint-100: #E7F7EE;

    --platinum-200: #E5E7EB;
    --platinum-400: #C9CED6;
    --platinum-600: #9AA3AF;

    --white: #FFFFFF;
    --black: #0A0A0A;
    --heading-blue: #0D47A1;


    /* =========================
       TRANSPARENT COLORS
       ========================= */

    --green-glass: rgba(11, 107, 58, 0.12);
    --green-glass-strong: rgba(11, 107, 58, 0.22);

    --white-glass: rgba(255, 255, 255, 0.08);
    --white-glass-strong: rgba(255, 255, 255, 0.14);

    --black-glass: rgba(10, 10, 10, 0.55);


    /* =========================
       GRADIENTS
       ========================= */

    --gradient-green:
        linear-gradient(
            135deg,
            var(--green-950),
            var(--green-900),
            var(--green-700)
        );

    --gradient-brand:
        linear-gradient(
            135deg,
            var(--green-900),
            var(--green-700),
            var(--green-500)
        );

    --gradient-metallic:
        linear-gradient(
            120deg,
            var(--green-400),
            var(--white),
            var(--platinum-400),
            var(--green-400)
        );

    --gradient-platinum:
        linear-gradient(
            135deg,
            var(--platinum-200),
            var(--white),
            var(--platinum-400)
        );


    /* =========================
       TYPOGRAPHY
       ========================= */

    --font-heading: "Sora", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-secondary: "Manrope", sans-serif;


    /* =========================
       SPACING
       ========================= */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;


    /* =========================
       CONTAINER
       ========================= */

    --container-width: 1400px;
    --container-padding: 5%;


    /* =========================
       BORDER RADIUS
       ========================= */

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-full: 999px;


    /* =========================
       BORDERS
       ========================= */

    --border-subtle: rgba(201, 206, 214, 0.25);
    --border-light: rgba(255, 255, 255, 0.18);
    --border-green: rgba(52, 214, 122, 0.3);


    /* =========================
       SHADOWS
       ========================= */

    --shadow-soft:
        0 10px 40px rgba(3, 23, 13, 0.08);

    --shadow-medium:
        0 20px 60px rgba(3, 23, 13, 0.14);

    --shadow-dark:
        0 30px 90px rgba(0, 0, 0, 0.3);

    --shadow-green:
        0 0 40px rgba(52, 214, 122, 0.2);


    /* =========================
       MOTION
       ========================= */

    --ease-main:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-smooth:
        cubic-bezier(0.16, 1, 0.3, 1);

    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 700ms;


    /* =========================
       Z-INDEX
       ========================= */

    --z-base: 1;
    --z-header: 1000;
    --z-overlay: 2000;
    --z-modal: 3000;
    --z-preloader: 9999;
}