/* =====================================================
   EduSmart Muslim Design System
   variables.css v2.0
===================================================== */

:root {

    /* BRAND COLORS */
    --color-primary: #2C8C7B;
    --color-primary-dark: #236F62;
    --color-primary-light: #E6F4F1;

    --color-accent: #D4AF37;

    --color-white: #FFFFFF;
    --color-background: #FFFFFF;

    --color-text: #222222;
    --color-text-light: #666666;

    --color-border: #CFE8E3;
/* ==========================================
   TYPOGRAPHY
========================================== */

/* Font Family */

--font-heading: 'Nunito', sans-serif;
--font-body: 'Nunito', sans-serif;
--font-arabic: 'Mirza', serif;

/* Font Size */

--font-size-xs: 0.75rem;      /* 12px */
--font-size-sm: 0.875rem;     /* 14px */
--font-size-base: 1rem;       /* 16px */

--font-size-md: 1.0625rem;    /* 17px */
--font-size-lg: 1.125rem;     /* 18px */
--font-size-xl: 1.25rem;      /* 20px */

--font-size-2xl: 1.5rem;      /* 24px */
--font-size-3xl: 2rem;        /* 32px */
--font-size-4xl: 2.5rem;      /* 40px */
--font-size-5xl: 3rem;        /* 48px */
--font-size-6xl: 4rem;        /* 64px */

/* Font Weight */

--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Line Height */

--line-height-tight: 1.3;
--line-height-normal: 1.6;
--line-height-relaxed: 1.8;
--line-height-loose: 2;

    /* LAYOUT */

    --container-width: 1200px;

    --header-height: 90px;

    --hero-padding-top: 120px;
    --hero-padding-bottom: 80px;

    /* SPACING */

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;

    /* BUTTON */

    --button-height: 54px;

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 20px;
    --radius-pill: 999px;

    /* SHADOW */

    --shadow-small:
        0 4px 12px rgba(0,0,0,.08);

    --shadow-medium:
        0 10px 30px rgba(0,0,0,.12);

    --shadow-large:
        0 20px 60px rgba(0,0,0,.18);

    /* TRANSITION */

    --transition: .3s ease;

    /* Z-INDEX */

    --z-header: 1000;
    --z-menu: 1100;
    --z-modal: 1200;

}