/* ==========================================================================
   MU Design Tokens — v1.0.0
   Almadain University College  ·  Office of the Brand Custodian  ·  2026

   Source of truth for all colors, typography, spacing, and radii used
   across the MU website and digital products.

   Usage:
       <link rel="stylesheet" href="/styles/mu-tokens.css">
       Then reference variables, e.g.:
           background: var(--mu-teal-500);
           font-size: var(--mu-fs-body);

   Companion document: MU_Website_Branding_Guidelines.docx
   Master document:    MU_Brand_Guidelines.docx

   DO NOT modify this file. To request changes, contact the Brand Custodian.
   ========================================================================== */

:root {
  /* ----- Brand colors ----- */
  --mu-teal-500: #009996;   /* Primary brand */
  --mu-teal-600: #00807D;   /* Primary hover */
  --mu-teal-700: #006866;   /* Primary active */
  --mu-teal-100: #CCEAEA;   /* Light tint */
  --mu-teal-50:  #E5F1F1;   /* Mist surface */

  --mu-gold-500: #FFAA00;   /* Accent */
  --mu-gold-600: #E69900;   /* Accent hover */

  /* ----- Neutrals ----- */
  --mu-ink:       #0E1E1F;  /* Primary text, dark surfaces */
  --mu-stone-700: #3D4D4F;  /* Secondary text */
  --mu-stone-500: #5C6E70;  /* Tertiary text, helper */
  --mu-stone-300: #9AA9AB;  /* Disabled, placeholder */
  --mu-stone-200: #C8D2D3;  /* Borders, dividers */
  --mu-stone-100: #ECF0F0;  /* Alt page bg, hover surface */
  --mu-paper:     #FFFFFF;  /* Default surface */

  /* ----- Semantic ----- */
  --mu-success: #1E8E5A;
  --mu-warning: #B8860B;
  --mu-danger:  #B8324A;
  --mu-info:    #1F6FB2;

  /* ----- Typography ----- */
  --mu-font-body: "29LT Bukra", "Inter", "IBM Plex Sans Arabic",
                  -apple-system, BlinkMacSystemFont, "Segoe UI",
                  system-ui, sans-serif;
  --mu-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular",
                  Consolas, "Liberation Mono", monospace;

  /* Type scale (rem-based, 16px root) */
  --mu-fs-display: 3.5rem;   /* 56px — Hero */
  --mu-fs-h1:      2.5rem;   /* 40px */
  --mu-fs-h2:      2rem;     /* 32px */
  --mu-fs-h3:      1.5rem;   /* 24px */
  --mu-fs-h4:      1.25rem;  /* 20px */
  --mu-fs-body:    1rem;     /* 16px */
  --mu-fs-small:   0.875rem; /* 14px */
  --mu-fs-tiny:    0.75rem;  /* 12px */

  /* Line-heights paired with type scale */
  --mu-lh-display: 1.1;
  --mu-lh-heading: 1.2;
  --mu-lh-h3:      1.3;
  --mu-lh-h4:      1.4;
  --mu-lh-body:    1.6;
  --mu-lh-tight:   1.4;

  /* Weights */
  --mu-fw-light:   300;
  --mu-fw-regular: 400;
  --mu-fw-bold:    700;

  /* ----- Spacing scale (4px base) ----- */
  --mu-space-1:  0.25rem;  /* 4px */
  --mu-space-2:  0.5rem;   /* 8px */
  --mu-space-3:  0.75rem;  /* 12px */
  --mu-space-4:  1rem;     /* 16px */
  --mu-space-6:  1.5rem;   /* 24px */
  --mu-space-8:  2rem;     /* 32px */
  --mu-space-12: 3rem;     /* 48px */
  --mu-space-16: 4rem;     /* 64px */
  --mu-space-24: 6rem;     /* 96px */

  /* ----- Radius ----- */
  --mu-radius-sm:   4px;   /* Chips, tags */
  --mu-radius-md:   8px;   /* Buttons, inputs, cards */
  --mu-radius-lg:   16px;  /* Large cards, modals */
  --mu-radius-pill: 999px; /* Pill buttons, status badges */

  /* ----- Elevation ----- */
  --mu-shadow-sm: 0 1px 2px rgba(14, 30, 31, 0.06);
  --mu-shadow-md: 0 4px 12px rgba(14, 30, 31, 0.08);
  --mu-shadow-lg: 0 16px 48px rgba(14, 30, 31, 0.10);

  /* ----- Icon sizes ----- */
  --mu-icon-xs:  12px;
  --mu-icon-sm:  16px;
  --mu-icon-md:  20px;
  --mu-icon-lg:  24px;
  --mu-icon-xl:  32px;
  --mu-icon-2xl: 48px;

  /* ----- Motion ----- */
  --mu-dur-fast:        120ms;
  --mu-dur-base:        200ms;
  --mu-dur-slow:        320ms;
  --mu-dur-deliberate:  480ms;

  --mu-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --mu-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --mu-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ----- Layout ----- */
  --mu-container-max: 1280px;
  --mu-container-pad: clamp(1rem, 4vw, 4rem);

  /* Breakpoints — use in @media queries */
  --mu-bp-sm:  480px;
  --mu-bp-md:  768px;
  --mu-bp-lg:  1024px;
  --mu-bp-xl:  1280px;
  --mu-bp-2xl: 1536px;

  /* ----- Focus ring ----- */
  --mu-focus-ring: 0 0 0 2px var(--mu-paper), 0 0 0 4px var(--mu-teal-500);
}

/* ==========================================================================
   Base resets — opinionated, premium-by-default
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--mu-font-body);
  font-size: 16px;
  color: var(--mu-ink);
  background: var(--mu-paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-size: var(--mu-fs-body);
  line-height: var(--mu-lh-body);
}

/* Headings inherit MU type scale */
h1 { font-size: var(--mu-fs-h1); line-height: var(--mu-lh-heading); font-weight: var(--mu-fw-bold); margin: 0 0 var(--mu-space-4); letter-spacing: -0.02em; }
h2 { font-size: var(--mu-fs-h2); line-height: var(--mu-lh-heading); font-weight: var(--mu-fw-bold); margin: 0 0 var(--mu-space-3); letter-spacing: -0.015em; }
h3 { font-size: var(--mu-fs-h3); line-height: var(--mu-lh-h3);      font-weight: var(--mu-fw-bold); margin: 0 0 var(--mu-space-3); }
h4 { font-size: var(--mu-fs-h4); line-height: var(--mu-lh-h4);      font-weight: var(--mu-fw-bold); margin: 0 0 var(--mu-space-2); }

p { margin: 0 0 var(--mu-space-4); }

/* Links */
a {
  color: var(--mu-teal-500);
  text-decoration: none;
  transition: color var(--mu-dur-fast) var(--mu-ease-out);
}
a:hover { color: var(--mu-teal-600); text-decoration: underline; text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--mu-teal-500); outline-offset: 2px; border-radius: 2px; }

/* Visible focus on every interactive element */
:focus-visible {
  outline: 2px solid var(--mu-teal-500);
  outline-offset: 2px;
}

/* Selection */
::selection { background: var(--mu-teal-100); color: var(--mu-ink); }

/* Container helper */
.mu-container {
  max-width: var(--mu-container-max);
  margin-inline: auto;
  padding-inline: var(--mu-container-pad);
}

/* ==========================================================================
   RTL handling — relies on logical properties throughout
   ========================================================================== */

[dir="rtl"] {
  /* Direction-sensitive icons must flip via this hook */
}
[dir="rtl"] .mu-flip-rtl { transform: scaleX(-1); }

/* Numbers, dates, English brand names stay LTR inside Arabic */
.mu-bidi-isolate { unicode-bidi: isolate; }

/* ==========================================================================
   Reduced motion — required, not optional
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Skip to content — first focusable element
   ========================================================================== */

.mu-skip-link {
  position: absolute;
  inset-inline-start: var(--mu-space-2);
  inset-block-start: var(--mu-space-2);
  padding: var(--mu-space-2) var(--mu-space-4);
  background: var(--mu-ink);
  color: var(--mu-paper);
  border-radius: var(--mu-radius-md);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--mu-dur-base) var(--mu-ease-out);
  z-index: 9999;
}
.mu-skip-link:focus-visible { transform: translateY(0); }