@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/PlexArabic-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/PlexArabic-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/PlexArabic-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/PlexArabic-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
    --mq-brand-primary: #23b697;
    --mq-brand-primary-hover: #137d68;
    --mq-brand-primary-soft: #e9f8f4;
    --mq-brand-secondary: #2c3e50;
    --mq-accent: #b898c7;

    --mq-bg: #f7f8fa;
    --mq-surface: #ffffff;
    --mq-surface-muted: #f2f4f7;
    --mq-surface-subtle: #fbfcfd;
    --mq-border: #e4e7ec;
    --mq-border-strong: #cfd5de;

    --mq-text: #182230;
    --mq-text-secondary: #475467;
    --mq-text-muted: #667085;

    --mq-success: #067647;
    --mq-success-soft: #ecfdf3;
    --mq-warning: #b54708;
    --mq-warning-soft: #fffaeb;
    --mq-danger: #b42318;
    --mq-danger-soft: #fef3f2;
    --mq-info: #175cd3;
    --mq-info-soft: #eff8ff;

    --mq-radius-sm: 8px;
    --mq-radius-md: 12px;
    --mq-radius-lg: 16px;
    --mq-radius-xl: 20px;

    --mq-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --mq-shadow-md: 0 8px 24px rgba(16, 24, 40, .07);
    --mq-shadow-lg: 0 20px 48px rgba(16, 24, 40, .12);
    --mq-focus-ring: color-mix(in srgb, var(--mq-brand-primary) 18%, transparent);

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

    --mq-content-max: 1240px;
    --mq-form-max: 820px;
    --mq-font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}

html,
body {
    margin: 0;
    background: var(--mq-bg);
    color: var(--mq-text);
    font-family: var(--mq-font-family);
}

* {
    box-sizing: border-box;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mq-brand-primary) 72%, white);
    outline-offset: 2px;
}

::selection {
    background: var(--mq-brand-primary-soft);
    color: var(--mq-text);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

:root {
 --mq-action: var(--mq-brand-primary-hover);
 --mq-brand-gradient: linear-gradient(125deg, var(--mq-brand-primary), var(--mq-brand-secondary) 65%, var(--mq-accent));
 --mq-brand-motif: repeating-linear-gradient(135deg, var(--mq-accent) 0 8px, transparent 8px 24px);
 --mq-navigation-surface: #2c3e50; --mq-navigation-text: #f4f7fa; --mq-text-on-action: #fff;

}
body { line-height: 1.7; }
h1, h2, h3 { color: var(--mq-text); line-height: 1.4; }
:root {
 --mq-type-caption:.8125rem; --mq-type-label:.8125rem; --mq-type-sm:.875rem;
 --mq-type-body:1rem; --mq-type-subtitle:1.125rem; --mq-type-h3:1.25rem;
 --mq-type-section:var(--mq-type-h3); --mq-type-h2:1.5rem;
 --mq-type-title:clamp(1.5rem,2.5vw,2rem); --mq-type-h1:var(--mq-type-title);
 --mq-type-display:clamp(2rem,4vw,2.5rem); --mq-control-height:44px;
}