:root {
    /* Layout */
    --savas-container-max: 105rem; /* 1680px */
    --savas-page-gutter: 1rem;
    --savas-container-inset: max(
        var(--savas-page-gutter),
        calc((100vw - var(--savas-container-max)) / 2)
    );
    --savas-grid-gutter-x: 1.5rem;
    --savas-grid-gutter-y: 0;

    /* Typography */
    --savas-font-sans: "Manrope", "Segoe UI", sans-serif;
    --savas-font-display: "Cormorant Garamond", "Times New Roman", serif;
    --savas-font-size-base: 1rem;
    --savas-line-height-base: 1.6;
    /* Canonical page / rich-text heading (H1 metrics — tek tip) */
    --savas-font-size-heading: clamp(2.35rem, 4.4vw, 3.85rem);
    --savas-line-height-heading: 1.08;
    --savas-letter-spacing-heading: 0.01em;

    /* Brand / surface */
    --savas-color-text: #1c1a17;
    --savas-color-text-soft: rgba(255, 255, 255, 0.72);
    --savas-color-background: #f7f4ef;
    --savas-color-surface: #fbfaf7;
    --savas-color-surface-dark: #0d0c0b;
    --savas-color-white: #ffffff;
    --savas-color-border: rgba(255, 255, 255, 0.28);
    --savas-color-border-soft: rgba(28, 26, 23, 0.12);
    --savas-color-focus: #c4a574;
    --savas-color-accent: #8a7352;

    /* Shared rhythm */
    --savas-space-1: 0.25rem;
    --savas-space-2: 0.5rem;
    --savas-space-3: 0.75rem;
    --savas-space-4: 1rem;
    --savas-space-5: 1.5rem;
    --savas-space-6: 2rem;
    --savas-space-7: 3rem;
    --savas-space-8: 4rem;
    --savas-header-height: 5.25rem;
    --savas-section-space-y: clamp(4.5rem, 8vw, 7.5rem);

    /* Horizontal motion sign: multiply translateX offsets so they mirror in RTL. */
    --savas-dir: 1;
}

/* Arabic (RTL): Latin brand fonts stay first so Latin product names keep them;
   Arabic glyphs fall through to the Arabic faces loaded only on RTL pages. */
:root[dir="rtl"] {
    --savas-dir: -1;
    --savas-font-sans: "Manrope", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --savas-font-display: "Cormorant Garamond", "Noto Naskh Arabic", "Times New Roman", serif;
    --savas-line-height-base: 1.85;
    --savas-line-height-heading: 1.4;
    --savas-letter-spacing-heading: 0;
}

@media screen and (max-width: 1199.98px) {
    :root {
        --savas-header-height: 4.5rem;
    }
}

@media screen and (max-width: 767.98px) {
    :root {
        --savas-font-size-heading: clamp(2rem, 8.5vw, 2.75rem);
    }
}

@media screen and (max-width: 575.98px) {
    :root {
        --savas-header-height: 4rem;
    }
}