:root {
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --surface-sunken: #F0EEE9;
  --ink: #12312B;
  --ink-soft: #5C6F6A;
  --ink-faint: #9AA8A4;
  --line: #E4E2DC;
  --line-strong: #CFCCC3;
  --brand: #0E6E5C;
  --brand-strong: #0A5647;
  --brand-tint: #E3F0ED;
  --brand-ghost: rgba(14,110,92,.08);
  --accent: #E86A4E;
  --accent-strong: #D4573B;
  --accent-tint: #FCEAE4;
  --success: #1F8A5D;
  --success-tint: #E4F3EC;
  --danger: #C4453A;
  --danger-tint: #F9E8E6;
  --warning: #C98A2D;
  --warning-tint: #F7EEDD;
  --info: #3E7DA6;
  --info-tint: #E7F1F7;
  --doc-sara: #0E6E5C;
  --doc-sara-tint: #E3F0ED;
  --doc-mhmd: #4C7AB0;
  --doc-mhmd-tint: #E8EFF7;
  --doc-layla: #B0684C;
  --doc-layla-tint: #F7ECE7;
  --shadow-card: 0 4px 20px rgba(18,49,43,.07);
  --shadow-pop: 0 12px 32px rgba(18,49,43,.14);
  --shadow-sheet: 0 -8px 32px rgba(18,49,43,.12);
  --focus-ring: 0 0 0 3px rgba(14,110,92,.35);
  --grad-hero: linear-gradient(135deg,#0E6E5C 0%,#0A5647 60%,#093F35 100%);
  --font-heading: "Readex Pro", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --admin-sidebar: 250px;
  --content-max: 1360px;
}

* {
  box-sizing: border-box;
}

html {
  min-block-size: 100%;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  text-align: start;
  -webkit-text-size-adjust: 100%;
}

body {
  min-block-size: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  transition: background-color 250ms ease, color 250ms ease;
}

body.is-dense {
  --dense-pad: 12px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
}

bdi,
[dir="ltr"],
.numeric {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.app-root {
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3,
.brand-word,
.admin-logo,
.kpi-card strong {
  font-family: var(--font-heading);
}

h1 {
  font-size: 22px;
  line-height: 1.28;
  font-weight: 700;
}

h2 {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
}

h3 {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}

p,
small {
  color: var(--ink-soft);
}

small {
  display: block;
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  h1 {
    font-size: 30px;
  }
}