/* Masar University — design tokens
   Source of truth: MASAR_WEBSITE_REDESIGN_PLAN.md §2.
   Shared by the prototype and the falar-child theme. */

:root {
  /* Navy */
  --mu-navy-950: #001B3D;
  --mu-navy: #002F6C;
  --mu-navy-800: #003B66;
  --mu-navy-700: #064D7A;

  /* Teal */
  --mu-teal-700: #03758B;   /* buttons and small teal text on light */
  --mu-teal: #048AA4;       /* official brand teal: icons, rules, borders */
  --mu-teal-300: #5FD0E3;   /* teal text on navy (7.16:1) */
  --mu-teal-100: #E7F7FA;
  --mu-teal-050: #F2FBFC;

  /* Warm accents — restrained */
  --mu-gold: #F5B800;
  --mu-bronze: #B67C4E;
  --mu-bronze-700: #8A5A33;

  /* Neutrals */
  --mu-white: #FFFFFF;
  --mu-surface: #F7FAFC;
  --mu-surface-2: #EEF4F7;
  --mu-border: #E3EAF0;
  --mu-text: #1F2937;
  --mu-text-muted: #667085;
  --mu-on-dark: rgba(255, 255, 255, .86);
  --mu-on-dark-muted: #C8D3E0;

  /* Typography — Cairo + Poppins, per the official identity guide (owner decision 2026-09-27).
     Tajawal stays switchable in the prototype only. */
  --mu-font-tajawal: "Tajawal", "Cairo", Arial, sans-serif;
  --mu-font-cairo: "Cairo", "Tajawal", Arial, sans-serif;
  --mu-font-ar: var(--mu-font-cairo);
  --mu-font-en: "Poppins", Arial, sans-serif;

  --mu-fw-regular: 400;
  --mu-fw-medium: 500;
  --mu-fw-semibold: 600;
  --mu-fw-bold: 700;
  --mu-fw-heavy: 800;
  --mu-fs-root: 16px;

  --mu-fs-h1: clamp(1.95rem, 3.6vw, 2.95rem);
  --mu-fs-h2: clamp(1.75rem, 3vw, 2.45rem);
  --mu-fs-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --mu-fs-body-lg: 1.12rem;
  --mu-fs-small: .875rem;

  /* Shape */
  --mu-radius-sm: 8px;
  --mu-radius-md: 12px;     /* buttons, inputs, accordion */
  --mu-radius-lg: 16px;     /* cards */
  --mu-radius-xl: 22px;     /* hero cards */
  --mu-radius-pill: 999px;

  --mu-shadow-sm: 0 8px 24px rgba(0, 47, 108, .07);
  --mu-shadow-md: 0 12px 34px rgba(0, 47, 108, .10);
  --mu-shadow-lg: 0 24px 60px rgba(0, 47, 108, .16);

  /* Layout */
  --mu-container: 1240px;
  --mu-gutter: 24px;
  --mu-header-h: 84px;
  --mu-utility-h: 38px;

  --mu-ease: cubic-bezier(.2, .7, .2, 1);
  --mu-dur: .2s;
}

html[data-mu-font="tajawal"] {
  --mu-font-ar: var(--mu-font-tajawal);
  --mu-fw-semibold: 500;    /* Tajawal ships no 600 */
  --mu-fs-root: 17px;       /* Tajawal renders smaller than Cairo */
}

@media (max-width: 767px) {
  :root { --mu-gutter: 16px; --mu-header-h: 68px; }
}