:root {
  --sand: #CFBFA0;
  --sand-2: #E2D6BF;
  --paper: #F4EEE3;
  --ink: #1F170A;
  --ink-2: #3A2E1C;
  --muted: #7A6A4F;
  --line: rgba(31, 23, 10, .14);
  --danger: #A2381F;
  --ok: #4C6B3A;

  --f-ar: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-lat: "Jost", "Futura", system-ui, sans-serif;

  --r: 18px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); color: var(--ink); background: var(--sand); line-height: 1.7; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.lat { font-family: var(--f-lat); letter-spacing: .04em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em 1.5em; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer;
  font-weight: 600; transition: transform .25s var(--ease), background .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.sand { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.btn:disabled { opacity: .5; cursor: progress; transform: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}