/**
 * Mohamed Saleh V2 — Canonical Foundation Tokens
 * Production-approved runtime dependency for V2 public pages.
 */

:root {
    /* Brand */
    --ms-color-blue: #4A7CC6;
    --ms-color-blue-hover: #356CB8;
    --ms-color-orange: #F79A10;
    --ms-color-orange-hover: #E68900;
    --ms-color-navy: #354963;
    --ms-color-dark: #243447;

    /* Text */
    --ms-color-heading: #1B2430;
    --ms-color-body: #4F5B6A;
    --ms-color-text: var(--ms-color-body);
    --ms-color-muted: #7B8794;
    --ms-color-muted-readable: #68768A;

    /* Surfaces */
    --ms-color-bg: #F6F8FB;
    --ms-color-white: #FFFFFF;
    --ms-color-surface: var(--ms-color-white);
    --ms-color-soft-blue: #EEF5FD;
    --ms-color-soft-orange: #FFF4E5;
    --ms-color-border: #DCE3EA;
    --ms-color-border-soft: #EDF1F5;

    /* Semantic only */
    --ms-color-success: #2F855A;
    --ms-color-danger: #B42318;
    --ms-color-warning-text: #9A5A00;

    /* Typography */
    --ms-font-sans: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ms-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ms-font-serif: Georgia, serif;
    --ms-font-size-display: clamp(2.25rem, 3.35vw, 2.875rem);
    --ms-font-size-h1: clamp(1.875rem, 3vw, 2.625rem);
    --ms-font-size-h2: clamp(1.5rem, 2.3vw, 2.125rem);
    --ms-font-size-h3: clamp(1.125rem, 1.7vw, 1.5rem);
    --ms-font-size-h4: 1.125rem;
    --ms-font-size-lead: 1.0625rem;
    --ms-font-size-body: 1rem;
    --ms-font-size-small: .875rem;
    --ms-font-size-meta: .75rem;
    --ms-line-heading: 1.42;
    --ms-line-body: 1.85;
    --ms-line-article: 2;

    /* Layout */
    --ms-container-wide: 1240px;
    --ms-container: var(--ms-container-wide);
    --ms-container-medium: 980px;
    --ms-container-copy: 760px;
    --ms-container-reading: 820px;
    --ms-gutter: clamp(16px, 2.4vw, 24px);

    /* Spacing */
    --ms-space-1: 4px;
    --ms-space-2: 8px;
    --ms-space-3: 12px;
    --ms-space-4: 16px;
    --ms-space-5: 20px;
    --ms-space-6: 24px;
    --ms-space-8: 32px;
    --ms-space-10: 40px;
    --ms-space-12: 48px;
    --ms-space-14: 56px;
    --ms-space-16: 64px;
    --ms-space-18: 72px;
    --ms-space-20: 80px;
    --ms-section-space: clamp(48px, 6vw, 72px);
    --ms-section-space-lg: clamp(56px, 7vw, 80px);

    /* Radius */
    --ms-radius-sm: 8px;
    --ms-radius-md: 12px;
    --ms-radius-lg: 16px;
    --ms-radius-xl: 18px;
    --ms-radius-pill: 999px;

    /* Elevation */
    --ms-shadow-sm: 0 6px 20px rgba(27, 36, 48, .04);
    --ms-shadow-md: 0 14px 38px rgba(36, 52, 71, .07);
    --ms-shadow-hover: 0 18px 44px rgba(27, 36, 48, .10);

    /* Motion */
    --ms-motion-fast: 160ms ease;
    --ms-motion-normal: 220ms ease;


    /* Brand RGB channels — canonical alpha-safe references */
    --ms-rgb-blue: 74, 124, 198;
    --ms-rgb-blue-hover: 53, 108, 184;
    --ms-rgb-orange: 247, 154, 16;
    --ms-rgb-orange-hover: 230, 137, 0;
    --ms-rgb-heading: 27, 36, 48;
    --ms-rgb-dark: 36, 52, 71;
    --ms-rgb-white: 255, 255, 255;
    --ms-rgb-black: 0, 0, 0;

    /* Compatibility aliases — aliases only, never independent values */
    --ms-blue: var(--ms-color-blue);
    --ms-blue-hover: var(--ms-color-blue-hover);
    --ms-orange: var(--ms-color-orange);
    --ms-orange-hover: var(--ms-color-orange-hover);
    --ms-navy: var(--ms-color-navy);
    --ms-dark: var(--ms-color-dark);
    --ms-heading: var(--ms-color-heading);
    --ms-body: var(--ms-color-body);
    --ms-muted: var(--ms-color-muted);
    --ms-border: var(--ms-color-border);
    --ms-border-soft: var(--ms-color-border-soft);
    --ms-bg: var(--ms-color-bg);
    --ms-white: var(--ms-color-surface);
    --ms-soft-blue: var(--ms-color-soft-blue);
    --ms-soft-orange: var(--ms-color-soft-orange);

    /* Approved extended surfaces / borders used by V2 components */
    --ms-color-surface-subtle: #FBFCFE;
    --ms-color-surface-elevated: #FBFDFF;
    --ms-color-surface-faint: #FCFDFE;
    --ms-color-surface-cool: #F8FAFC;
    --ms-color-border-muted: #E7EDF3;
    --ms-color-border-subtle: #E8EDF2;
    --ms-color-border-blue-soft: #D9E8F9;
    --ms-color-border-orange-soft: #F8DCA6;

    /* Approved extended radius scale */
    --ms-radius-compact: 9px;
    --ms-radius-10: 10px;
    --ms-radius-card: 14px;
    --ms-radius-panel: 20px;
    --ms-radius-panel-lg: 22px;
    --ms-radius-dialog: 24px;
    --ms-radius-display: 30px;

    /* Approved extended elevation scale */
    --ms-shadow-card: 0 12px 34px rgba(var(--ms-rgb-heading), .07);
    --ms-shadow-card-strong: 0 20px 50px rgba(var(--ms-rgb-heading), .10);
    --ms-shadow-card-soft: 0 6px 18px rgba(var(--ms-rgb-heading), .035);
    --ms-shadow-tool: 0 10px 30px rgba(var(--ms-rgb-dark), .07);
    --ms-shadow-tool-lg: 0 18px 50px rgba(var(--ms-rgb-dark), .09);
    --ms-shadow-auth: 0 20px 48px rgba(var(--ms-rgb-dark), .08);

    /* Focus */
    --ms-focus-outline: 3px solid rgba(var(--ms-rgb-blue), .28);
    --ms-focus-shadow: 0 0 0 3px rgba(var(--ms-rgb-blue), .16);

    /* Global UI */
    --ms-header-offset: 96px;
}