:root {
    --brand-dark: #1a2e22;
    --brand-main: #3b5d44;
    --brand-light: #eaf1ec;
    --brand-accent: #659c74;
    --brand-blue: #1e40af;
    --page-bg: #f8faf9;
    --text-main: #333333;
    --color-brand-dark: var(--brand-dark);
    --color-brand-main: var(--brand-main);
    --color-brand-light: var(--brand-light);
    --color-brand-accent: var(--brand-accent);
    --color-brand-blue: var(--brand-blue);
    --color-body-bg: var(--page-bg);
    --color-body-text: var(--text-main);
    --shadow-brand: 0 10px 15px -3px rgba(59, 93, 68, 0.3);
    --radius-control: 0.5rem;
    --font-ar: "Cairo", sans-serif;
    --font-en: "Outfit", sans-serif;
}

html {
    scroll-behavior: smooth;
}

html[lang="ar"] body {
    font-family: "Cairo", sans-serif;
}

html[lang="en"] body {
    font-family: "Outfit", sans-serif;
}

body {
    background-color: var(--color-body-bg);
    color: var(--color-body-text);
    overflow-x: hidden;
}

.bg-brand-dark {
    background-color: var(--brand-dark);
}

.bg-brand-main {
    background-color: var(--brand-main);
}

.bg-brand-light {
    background-color: var(--brand-light);
}

.bg-brand-accent {
    background-color: var(--brand-accent);
}

.bg-brand-blue {
    background-color: var(--brand-blue);
}

.text-brand-dark {
    color: var(--brand-dark);
}

.text-brand-main {
    color: var(--brand-main);
}

.text-brand-light {
    color: var(--brand-light);
}

.text-brand-accent {
    color: var(--brand-accent);
}

.text-brand-blue {
    color: var(--brand-blue);
}

.border-brand-dark {
    border-color: var(--brand-dark);
}

.border-brand-main {
    border-color: var(--brand-main);
}

.border-brand-light {
    border-color: var(--brand-light);
}

.border-brand-accent {
    border-color: var(--brand-accent);
}

.border-brand-blue {
    border-color: var(--brand-blue);
}

.border-brand-main\/20 {
    border-color: rgba(59, 93, 68, 0.2);
}

.bg-brand-light\/30 {
    background-color: rgba(234, 241, 236, 0.3);
}

.hover\:border-brand-main:hover {
    border-color: var(--brand-main);
}

.hover\:bg-brand-main:hover {
    background-color: var(--brand-main);
}

.hover\:text-brand-main:hover {
    color: var(--brand-main);
}

.hover\:text-brand-dark:hover {
    color: var(--brand-dark);
}

.group:hover .group-hover\:text-brand-main {
    color: var(--brand-main);
}

footer.bg-\[\#1a2e22\] {
    background-color: var(--brand-dark) !important;
}

footer.bg-\[\#111e16\] {
    background-color: #111e16 !important;
}

.site-logo {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
}

.page-shell {
    min-height: 80vh;
}