@import url("../assets/brand-fonts.css");

:root {
  --arkan-blue: #0C99D0;
  --arkan-blue-mid: #1781B7;
  --arkan-blue-deep: #24649A;
  --arkan-text: #4A4B4C;
  --arkan-muted: #73808B;
  --arkan-navy: #0B1826;
  --arkan-bg: #F7FAFC;
  --arkan-mist: #EAF5FB;
  --arkan-line: #D9E2E8;
  --arkan-white: #FFFFFF;
  --whatsapp-green: #25D366;
  --whatsapp-green-deep: #128C7E;
  --status-green: #18864B;
  --status-red: #B94747;
  --arkan-gradient: linear-gradient(135deg, #0C99D0 0%, #1781B7 48%, #24649A 100%);
  --arkan-shadow: 0 18px 55px rgba(30, 70, 98, .10);
  --arkan-shadow-hover: 0 25px 65px rgba(30, 70, 98, .16);
  --arkan-font-text: "Thmanyah Serif Text";
  --arkan-font-display: "Thmanyah Serif Display";
}

*, *::before, *::after { box-sizing: border-box; }
html { direction: rtl; background: var(--arkan-bg); }
body, button, input, select, textarea {
  font-family: var(--arkan-font-text), "Apple Color Emoji", "Segoe UI Emoji", serif;
}
h1, h2, h3, .display { font-family: var(--arkan-font-display), var(--arkan-font-text), serif; }