:root {
  color-scheme: light;
  --ink-950: #11211c;
  --ink-900: #172a23;
  --ink-800: #234036;
  --ink-700: #35584b;
  --ink-600: #4c6e61;
  --ink-500: #6f8a80;
  --ink-300: #b8c7c1;
  --ink-200: #d8e0dc;
  --ink-100: #e9eeeb;
  --ink-50: #f5f7f6;
  --paper: #fffefa;
  --canvas: #f2efe7;
  --amber-700: #8f5d08;
  --amber-500: #d69218;
  --amber-300: #e8bc5a;
  --amber-200: #f2d799;
  --amber-100: #fbefce;
  --green-700: #24705a;
  --green-500: #46a181;
  --green-100: #dcefe7;
  --blue-700: #2d5d75;
  --blue-500: #5190ab;
  --blue-100: #e0edf2;
  --rose-700: #9a4350;
  --rose-100: #f6e3e5;
  --shadow: 0 18px 44px rgba(28, 48, 40, 0.08);
  --shadow-soft: 0 4px 14px rgba(28, 48, 40, 0.055);
  --radius-xl: 24px;
  --radius-lg: 16px;
  --radius-md: 14px;
  --font:
    Vazirmatn, Tahoma, "Geeza Pro", "Noto Sans Arabic", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink-900);
  background:
    radial-gradient(circle at 85% 2%, rgba(214, 146, 24, 0.12), transparent 28rem),
    radial-gradient(circle at 6% 24%, rgba(70, 161, 129, 0.1), transparent 25rem),
    var(--canvas);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(81, 144, 171, 0.32);
  outline-offset: 2px;
}

bdi {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92em;
}