@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@400;600;700;800&family=Roboto:wght@400;500;700;900&display=swap');

:root {
  --font-display: "Akshar", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg-dark: #111111;
  --bg-dark-2: #1c1b1b;
  --bg-panel: #101010;
  --bg-light: #ffffff;
  --bg-soft: #f4efe7;
  --accent: #ff7900;
  --accent-2: #ff8314;
  --accent-3: #f5b938;
  --text-dark: #151515;
  --text-mid: #565656;
  --text-light: #ffffff;
  --text-soft: rgba(255,255,255,0.78);
  --border-dark: rgba(255,255,255,0.12);
  --border-light: rgba(0,0,0,0.12);
  --success: #2a8a47;
  --warning: #a86a10;
  --error: #bf2e2e;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-xl: 26px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;

  --container: min(1320px, calc(100vw - 36px));
  --container-tight: min(1180px, calc(100vw - 36px));

  --display: clamp(3rem, 8vw, 5.6rem);
  --h1: clamp(2.2rem, 5vw, 4.2rem);
  --h2: clamp(1.8rem, 4vw, 3rem);
  --h3: clamp(1.25rem, 2vw, 1.6rem);
  --body: 1rem;
  --small: .95rem;
}

html {
  font-family: var(--font-body);
  background: var(--bg-dark);
}
body {
  font-family: var(--font-body);
}
html[lang="ar-IQ"] body {
  font-family: system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
}
html[lang="zh-Hans"] body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}