/* ============================================================
   HAYKAL — Design tokens & global resets
   ============================================================ */

:root {
  /* ===== Colors ===== */
  --bg-deep: #1a1410;
  --bg-warm: #2a201a;
  --bg-paper: #f4ead8;
  --bg-cream: #ebdcc1;
  --bg-tan: #d9c19a;
  --ink: #1a1410;
  --ink-soft: #3d2f24;
  --ink-mid: #6b5740;
  --burnt: #c75a2a;
  --burnt-deep: #9a3f1a;
  --ember: #e89556;
  --moss-deep: #3d4a26;
  --line: rgba(26, 20, 16, 0.12);
  --line-strong: rgba(26, 20, 16, 0.25);

  /* ===== Fonts ===== */
  --font-display: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-body: 'Noto Sans Arabic', 'Cairo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ===== Spacing ===== */
  --pad-x: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 10vw, 120px);
  --max-w: 1280px;
}

/* ===== Resets ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }