:root {
    --color-black: #000000;
    --color-ink: #1a1714;
    --color-sand: #edd8a5;
    --color-paper: #faf6eb;
    --color-white: #fffdf8;
    --color-burnt: #c46641;
    --color-gold: #f3b846;
    --color-orange: #f1a443;
    --color-muted: #6f655a;
    --color-line: rgba(26, 23, 20, 0.14);
    --color-dark-line: rgba(255, 253, 248, 0.18);

    --font-display: "Teko", sans-serif;
    --font-display-latin: "Teko", sans-serif;
    --font-body: "Noto Sans Arabic", sans-serif;
    --font-body-ar: "IBM Plex Sans Arabic", sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    --radius-control: 8px;
    --radius-card: 20px;
    --shadow-soft: 0 8px 24px rgba(26, 23, 20, 0.08);
    --shadow-lift: 0 16px 32px rgba(26, 23, 20, 0.14);
    --content-width: 1240px;
    --header-height: 80px;
}

html[lang="en"] {
    --font-display: "Teko", sans-serif;
    --font-body: "Noto Sans Arabic", sans-serif;
}

html[lang="ar"] {
    --font-display: var(--font-body-ar);
    --font-body: var(--font-body-ar);
}

html[lang="ar"] .brand-lockup__name strong,
html[lang="ar"] .brand-lockup__name span {
    font-family: var(--font-display-latin);
}