/* MMS design tokens.
   Same family as YellowQT (indigo + Arabic type), but MMS owns the accent:
   indigo leads, and yellow is reserved for "needs attention" so a late card
   reads instantly. Dark mode switches on [data-theme="dark"]. */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/static/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/static/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/static/fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/static/fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('/static/fonts/tajawal-700.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand */
  --mms-primary: #6c6acd;
  --mms-primary-strong: #4b4f9a;
  --mms-primary-soft: #ecebf9;
  --mms-primary-ring: rgba(108, 106, 205, 0.35);

  /* Attention */
  --mms-warn: #fbbd11;
  --mms-warn-soft: #fff6da;
  --mms-danger: #e5484d;
  --mms-danger-soft: #fdecec;
  --mms-success: #12a150;
  --mms-success-soft: #e7f7ee;

  /* Priority */
  --p-high: #e5484d;
  --p-medium: #f5a524;
  --p-low: #60a5fa;

  /* Surfaces */
  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #fafbfe;
  --surface-sunken: #eef0f7;
  --border: #e3e6ef;
  --border-strong: #cbd0e0;

  /* Text. --text-3 is dark enough to clear 4.5:1 on both --surface and
     --surface-sunken; the usual "elegant light gray" fails on the sunken
     column background, which is where most of our small text sits. */
  --text: #14161f;
  --text-2: #5b6172;
  --text-3: #636a7d;
  --on-primary: #ffffff;

  /* Shape */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 20, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 20, 40, 0.08);
  --shadow-lg: 0 18px 48px rgba(16, 20, 40, 0.18);

  --header-h: 60px;
  --lane-col-min: 260px;

  --font: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Tajawal', var(--font);

  /* ── Motion ───────────────────────────────────────────────────────────────
     This is a tool, not a showreel: motion exists to say "that worked" and to
     keep a moving card readable. Everything decelerates - no bounce, no
     elastic, no page-load choreography. Exits run at ~75% of their entrance. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-tap: 110ms;    /* press feedback, colour shifts */
  --dur-fast: 170ms;   /* hover, focus, small state changes */
  --dur-base: 240ms;   /* cards arriving, panels opening */
  --dur-slow: 320ms;   /* collapse / expand of a whole lane */
}

[data-theme="dark"] {
  color-scheme: dark;

  --mms-primary: #8b89e0;
  --mms-primary-strong: #a5a3ec;
  --mms-primary-soft: #24243a;
  --mms-primary-ring: rgba(139, 137, 224, 0.4);

  --mms-warn: #fbbd11;
  --mms-warn-soft: #3a2f0e;
  --mms-danger: #f16b6f;
  --mms-danger-soft: #3a1f21;
  --mms-success: #35c37d;
  --mms-success-soft: #12301f;

  --p-high: #f16b6f;
  --p-medium: #f7b955;
  --p-low: #7cb7fb;

  --bg: #0e1016;
  --surface: #171a22;
  --surface-2: #1c202a;
  --surface-sunken: #12141b;
  --border: #272c38;
  --border-strong: #39404f;

  --text: #e8eaf0;
  --text-2: #a2a9ba;
  --text-3: #878fa2;
  --on-primary: #12131a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
}