/* Omnite base · DESIGN TOKENS.
   Skins (skin-01/02/03) override ONLY these custom properties — never the component CSS.
   RTL-first; IBM Plex Sans Arabic with graceful system fallback. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    /* brand */
    --omx-primary: #1A1F9E;
    --omx-primary-ink: #ffffff;
    --omx-accent: #ff6a3d;

    /* neutrals */
    --omx-bg: #ffffff;
    --omx-surface: #f6f7fb;
    --omx-border: #e5e7eb;
    --omx-ink: #111827;
    --omx-ink-soft: #6b7280;
    --omx-ink-faint: #9ca3af;

    /* type */
    --omx-font: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    --omx-fs-base: 15px;
    --omx-fs-title: clamp(20px, 2.4vw, 30px);

    /* shape & space */
    --omx-radius: 14px;
    --omx-radius-sm: 10px;
    --omx-gap: 16px;
    --omx-container: 1200px;
    --omx-shadow: 0 8px 28px rgba(17, 24, 39, .08);
    --omx-shadow-sm: 0 2px 10px rgba(17, 24, 39, .06);

    /* customizer-overridable chrome (ThemeTokens) */
    --omx-header-bg: var(--omx-bg);
    --omx-footer-bg: var(--omx-ink);
    --omx-footer-ink: #cbd5e1;
}

/* Scope normalization under .omx so we never fight the core/theme reset globally. */
.omx, .omx * { box-sizing: border-box; }
.omx { font-family: var(--omx-font); color: var(--omx-ink); font-size: var(--omx-fs-base); }
.omx img { max-width: 100%; height: auto; display: block; }
.omx a { color: inherit; text-decoration: none; }

.omx-container { max-width: var(--omx-container); margin-inline: auto; padding-inline: 16px; width: 100%; }
.omx-main { display: block; }

/* shared section title */
.omx-sec-title { font-size: var(--omx-fs-title); font-weight: 700; margin: 0 0 var(--omx-gap); }
.omx-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--omx-gap); }
.omx-sec-head .omx-sec-title { margin: 0; }
.omx-sec-more { color: var(--omx-primary); font-weight: 600; font-size: 14px; }

/* buttons */
.omx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
    font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.omx-btn--primary { background: var(--omx-primary); color: var(--omx-primary-ink); }
.omx-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--omx-shadow); }