/*!
 * MAZRAF — Official Brand Layer (CSS)
 * Source of truth: MAZRAF Brand Guidelines (Visual Identity Guidelines, 2025)
 * Shared by: www.mazraf.com · fleet.mazraf.com · cms.mazraf.com · docs.mazraf.com
 *
 * Colour palette
 *   Primary   : Dark Navy  #00274F · Bright Cyan #0094C1
 *   Secondary : Grey       #A7A8AB · Off White   #F1F1F1
 * Typography
 *   Headings    : Nexa Heavy   (fallback: Poppins 800 → Cairo 900 for Arabic)
 *   Subheadings : Poppins Medium (500)
 *   Body        : Poppins Regular (400) · Arabic: Cairo
 */

/* Nexa Heavy is a licensed typeface: it is used when installed locally or when licensed
   web-font files are added to /assets/brand/fonts/. Otherwise the stack falls back to Poppins. */
@font-face {
  font-family: 'Nexa Heavy';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: local('Nexa Heavy'), local('Nexa-Heavy'), local('NexaHeavy');
}

:root {
  /* ---- Core palette (exact values from the guide) ---- */
  --mz-navy: #00274F;
  --mz-cyan: #0094C1;
  --mz-grey: #A7A8AB;
  --mz-offwhite: #F1F1F1;
  --mz-white: #FFFFFF;
  --mz-black: #000000;

  /* RGB channels for rgba()/Tailwind-style opacity */
  --mz-navy-rgb: 0 39 79;
  --mz-cyan-rgb: 0 148 193;
  --mz-grey-rgb: 167 168 171;
  --mz-offwhite-rgb: 241 241 241;

  /* ---- Derived tints/shades (for states only) ---- */
  --mz-navy-900: #001A36;
  --mz-navy-700: #003F73;
  --mz-cyan-700: #00799F;
  --mz-cyan-400: #2EB0D7;
  --mz-cyan-50: #EAF7FB;

  /* Logo gradient (Bright Cyan → Dark Navy) */
  --mz-gradient: linear-gradient(135deg, #0094C1 0%, #005A92 50%, #00274F 100%);
  --mz-gradient-soft: linear-gradient(135deg, rgba(0, 148, 193, .12) 0%, rgba(0, 39, 79, .12) 100%);

  /* ---- Typography ---- */
  --mz-font-heading: 'Nexa Heavy', 'Nexa', 'Poppins', 'Cairo', system-ui, sans-serif;
  --mz-font-sub: 'Poppins', 'Cairo', system-ui, sans-serif;
  --mz-font-body: 'Poppins', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mz-font-arabic: 'Cairo', 'Poppins', system-ui, sans-serif;
  --mz-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Logo safe zone: 1/4 of the logo height ---- */
  --mz-logo-safe-zone: 0.25;
}

/* ===================== Base typography ===================== */
html body {
  font-family: var(--mz-font-body);
}
html[dir="rtl"] body,
html[lang="ar"] body,
html[lang="ur"] body {
  font-family: var(--mz-font-arabic);
}
h1, h2, .mz-heading, .font-brand {
  font-family: var(--mz-font-heading);
  letter-spacing: -0.01em;
}
h3, h4, .mz-subheading {
  font-family: var(--mz-font-sub);
}
html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] .mz-heading {
  /* Arabic headings: Cairo Black, per the Arabic specimen in the guide */
  font-family: 'Cairo', var(--mz-font-heading);
}
code, pre, kbd, samp, .font-mono {
  font-family: var(--mz-font-mono);
}

/* ===================== Global brand accents ===================== */
::selection {
  background: rgba(var(--mz-cyan-rgb) / .9);
  color: #FFFFFF;
}
:focus-visible {
  outline-color: var(--mz-cyan);
}
html {
  accent-color: var(--mz-cyan);
  scrollbar-color: rgba(var(--mz-grey-rgb) / .6) transparent;
}

/* ===================== Logo helpers ===================== */
.mz-logo {
  display: inline-block;
  height: 2.5rem;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.mz-logo--sm { height: 2rem; }
.mz-logo--lg { height: 3.5rem; }
.mz-logo--xl { height: 5rem; }
/* Safe zone wrapper: pads 1/4 of the logo height on every side */
.mz-logo-safe { display: inline-flex; padding: calc(var(--mz-logo-h, 2.5rem) * var(--mz-logo-safe-zone)); }
/* The lockup always reads left→right (symbol then wordmark), even inside RTL layouts */
.mz-lockup { display: inline-flex; align-items: center; direction: ltr; gap: .5rem; }

/* Light/dark logo switching (works with Tailwind's `dark` class on <html>) */
.mz-on-dark { display: none !important; }
html.dark .mz-on-light { display: none !important; }
html.dark .mz-on-dark { display: inline-block !important; }
/* Surfaces that are always dark (e.g. fleet sidebar) */
.mz-force-dark .mz-on-light { display: none !important; }
.mz-force-dark .mz-on-dark { display: inline-block !important; }

/* ===================== Brand surfaces ===================== */
.mz-bg-navy { background-color: var(--mz-navy) !important; color: #FFFFFF; }
.mz-bg-cyan { background-color: var(--mz-cyan) !important; color: #FFFFFF; }
.mz-bg-offwhite { background-color: var(--mz-offwhite) !important; }
.mz-bg-gradient { background-image: var(--mz-gradient) !important; color: #FFFFFF; }
.mz-text-navy { color: var(--mz-navy) !important; }
.mz-text-cyan { color: var(--mz-cyan) !important; }
.mz-text-grey { color: var(--mz-grey) !important; }
html.dark .mz-text-navy { color: #FFFFFF !important; }

/* Decorative oversized camel mark (as on the guide cover & social covers) */
.mz-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  background: url('/assets/brand/mazraf-mark-white.png') no-repeat center / contain;
  opacity: .07;
}

/* Descriptor line: Fleet | IOT | Telematics */
.mz-tagline {
  font-family: var(--mz-font-sub);
  font-weight: 600;
  color: var(--mz-cyan);
  letter-spacing: .01em;
}

/* Brand buttons */
.mz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mz-font-sub); font-weight: 600;
  background: var(--mz-cyan); color: #FFFFFF;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.mz-btn:hover { background: var(--mz-cyan-700); }
.mz-btn--navy { background: var(--mz-navy); }
.mz-btn--navy:hover { background: var(--mz-navy-700); }