@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ===========================
   RESET
=========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background: var(--background);
    color: var(--text-primary);
    font-family: var(--font-family);
}

a {
    text-decoration: none;
    color: inherit;
    transition: .3s;
}

a:hover {
    text-decoration: none !important;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ===========================
   DESIGN SYSTEM
=========================== */

/* ==========================================
   DESIGN SYSTEM
   Pharmacy Theme
========================================== */

:root {

    /* ========= Brand Colors ========= */

    --primary: #0F766E;
    --primary-hover: #0D5F59;

    --secondary: #14B8A6;
    --secondary-hover: #109D8F;
    --accent: #14B8A6;

    --tertiary: #22C55E;
    --tertiary-hover: #16A34A;

    /* ========= Neutral ========= */

    --neutral: #747877;

    /* ========= Background ========= */

    --background: #F7F9FA;
    --surface: #FFFFFF;
    --surface-hover: #F1F5F9;

    /* ========= Text ========= */

    --text-primary: #1E293B;
    --text-secondary: #475569;
    --text-light: #94A3B8;
    --text-white: #FFFFFF;

    /* ========= Border ========= */

    --border: #E2E8F0;
    --border-light: #EEF2F7;

    /* ========= Status ========= */

    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #DC2626;
    --info: #0EA5E9;

    /* ========= Radius ========= */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-round: 999px;

    /* ========= Shadow ========= */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
    --shadow-lg: 0 18px 45px rgba(0, 0, 0, .12);

    /* ========= Layout ========= */

    --container: 1320px;

    --navbar-height: 80px;

    /* ========= Transition ========= */

    --transition: .3s ease;

    /* ========= Font ========= */

    --font-family: "Inter", sans-serif;

}

/* ==========================================================================
   Arabic Language Typography Configuration
   ========================================================================== */
html[lang="ar"] {
  --font-family: "Cairo", "Inter", sans-serif;
  line-height: 1.6;
}

html[lang="ar"] * {
  letter-spacing: normal !important;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
  line-height: 1.35;
}