@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* MAYDAN LINK — Global Design Tokens */

:root {
    --ml-primary: #152D32;
    --ml-primary-hover: #21434A;
    --ml-accent: #168C87;
    --ml-accent-hover: #11736F;
    --ml-accent-light: #E7F5F3;

    --ml-bg: #F4F7F7;
    --ml-surface: #FFFFFF;
    --ml-surface-muted: #F8FAFA;

    --ml-text: #24343A;
    --ml-muted: #66777D;
    --ml-border: #DDE5E7;

    --ml-success: #24836A;
    --ml-warning: #D79C45;
    --ml-danger: #C84A44;

    --ml-radius-sm: 6px;
    --ml-radius-md: 9px;
    --ml-radius-lg: 12px;

    --ml-space-1: 4px;
    --ml-space-2: 8px;
    --ml-space-3: 12px;
    --ml-space-4: 16px;
    --ml-space-5: 20px;
    --ml-space-6: 24px;

    --ml-font: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;

    --ml-shadow: 0 2px 10px rgba(21,45,50,.045);
}


/* MAYDAN GLOBAL BRAND — TYPOGRAPHY V1 */



html {
    font-family: var(--ml-font);
}

body {
    font-family: var(--ml-font);
}

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

/* MAYDAN LINK — shared interaction design language (all modules).
   Theme overrides use the same semantic tokens, avoiding per-page color drift. */
:root {
    --ml-hover-surface: #DDF1EE;
    --ml-hover-border: #168C87;
    --ml-hover-text: #123C40;
    --ml-hover-shadow: 0 3px 14px rgba(22, 140, 135, .14);
    --ml-focus-ring: #168C87;
}
body.dark-mode {
    --ml-hover-surface: #285154;
    --ml-hover-border: #56BBB5;
    --ml-hover-text: #F4FCFC;
    --ml-hover-shadow: 0 3px 14px rgba(0, 0, 0, .24);
    --ml-focus-ring: #66D0C9;
}

/* Reusable shared treatment for future MAYDAN controls. Does not turn
   informational tiles or disabled actions into interactive elements. */
:where(button:not(:disabled), a[href].ml-action, [role="button"]:not([aria-disabled="true"])) {
    transition: background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, color .18s ease;
}
:where(button:not(:disabled), a[href].ml-action, [role="button"]:not([aria-disabled="true"])):focus-visible {
    outline: 2px solid var(--ml-focus-ring);
    outline-offset: 3px;
}
/* Shared opt-in visual hover for interactive surfaces of all shapes. */
.ml-hoverable:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background-color: var(--ml-hover-surface);
    border-color: var(--ml-hover-border);
    color: var(--ml-hover-text);
    box-shadow: var(--ml-hover-shadow);
}
@media (prefers-reduced-motion: reduce) {
    :where(button, a, [role="button"]) { transition-duration: 0s !important; }
}

/* One brand typography definition for onboarding and internal workspace. */
:root{--ml-brand-wordmark-size:clamp(27px,2.5vw,35px);--ml-brand-slogan-size:13px}
.ml-brand-wordmark{font-family:var(--ml-font);font-size:var(--ml-brand-wordmark-size);font-weight:800;letter-spacing:.01em;line-height:1.12}
.ml-brand-slogan{font-family:var(--ml-font);font-size:var(--ml-brand-slogan-size);font-weight:600;line-height:1.6}