/* ════════════════════════════════════════════════════════════════════════
   NDS LAYOUT / APP-SHELL FOUNDATION — from _sass/_variables-critical.scss
   Layout dims, transitions, brand font knob + weight scale.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --nds-nav-height: 72px;
    --nds-minimal-nav-item-height: 40px;
    --nds-sidemenu-width: 260px;
    --nds-sidemenu-toggle-height: 56px;
    --nds-sideinfo-width: 400px;
    --nds-minimal-nav-bp: 960px; /* @kind other */
    --nds-content-MaxWidth: 1280px;
    --nds-viewport-base-padding: 32px;
    --nds-transition-speed: .2; /* @kind other */

    --nds-viewport-padding: var(--nds-viewport-base-padding);

    --nds-transition-effect: ease; /* @kind other */
    --nds-transition: calc(var(--nds-transition-speed) * 1s) var(--nds-transition-effect); /* @kind other */

    /* Brand typeface knob + effective family */
    --nds-font-brand: 'IBM Plex Sans Arabic', sans-serif;
    --nds-font-family: var(--nds-font-brand);

    /* Per-theme font-weight scale (IBM Plex faces) */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

@media (max-width: 768px) {
    :root {
        --nds-viewport-padding: calc(var(--nds-viewport-base-padding) / 2);/* @kind other */
    }
}