/* =====================================================================
   Brand tokens "الرول" (web). Same values as muraf3at-desktop/src/styles/brand.css
   and docs/BRAND_IDENTITY.md section 3. Loaded first by every front layout.
   Stage 9.6: light values only (dark mode comes in 9.7).
   ===================================================================== */

@font-face {
  font-family: "MH Almarai";
  src: url(../fonts/Almarai/Almarai-Regular.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MH Almarai";
  src: url(../fonts/Almarai/Almarai-Bold.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "MH Almarai";
  src: url(../fonts/Almarai/Almarai-ExtraBold.ttf) format("truetype");
  font-weight: 800;
  font-display: swap;
}

html:root { /* html:root (not :root) so these win over Bootstrap 4's own :root --success / --info / --warning / --danger, which loads later */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f7f8;
  --ink: #1f2937;
  --ink-deep: #111827;
  --on-ink: #f9fafb;
  --on-ink-2: #cbd5e1;
  --on-ink-link: #d1d5db;
  --heading: #1f2937;
  --text: #374151;
  --text-muted: #4b5563;
  --muted-2: #5b6472;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --field: #8b929c;
  --gold: #c9a961;
  --gold-hover: #d6bb7c;
  --gold-text: #8a6237;
  --gold-text-hover: #6e4d2a;
  --gold-deco: #a67c52;
  --gold-tint: #faf6ee;
  --on-gold: #1f2937;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --success: #166534;
  --success-bg: #f0fdf4;
  --warning: #92400e;
  --warning-bg: #fffbeb;
  --info: #1e4e8c;
  --info-bg: #eff4fb;
  --shadow-float: 0 18px 40px -18px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.12);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 400ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #111827;
  --surface: #1a2230;
  --surface-2: #1f2937;
  --heading: #f9fafb;
  --text: #e5e7eb;
  --text-muted: #cbd5e1;
  --muted-2: #9ca3af;
  --line: #2b3544;
  --line-2: #3a4556;
  --field: #667387;
  --gold-text: #d6bb7c;
  --gold-text-hover: #e6d2a3;
  --gold-tint: rgba(201,169,97,.10);
  --on-gold: #111827;
  --danger: #f97066;
  --danger-bg: rgba(240,68,56,.12);
  --success: #4ade80;
  --success-bg: rgba(34,197,94,.12);
  --warning: #fbbf24;
  --warning-bg: rgba(245,158,11,.12);
  --info: #93b4e0;
  --info-bg: rgba(59,130,246,.12);
  --shadow-float: 0 18px 40px -18px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.24);
  color-scheme: dark;
}

/* Lucide icons (lucide-subset.js) take the size and color of the text, like Font Awesome */
.lucide { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }

/* theme switch: 240 ms cross-fade (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }

/* theme menu (navbar) */
.mc-theme .dropdown-item.active, .mc-theme .dropdown-item:active { background: var(--gold-tint); color: var(--gold-text); }
.mc-theme .dropdown-item { display: flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* the logo sits on a white disc on ink bars and in dark mode */
.brand-logo {
  background: #fff;
  border-radius: 50%;
}