:root {
  --bg: #eef1fb;
  --white: #f6e5fa;
  --black: #101418;
  --black-soft: #3e235d;
  --panel: rgba(248, 245, 255, 0.97);
  --panel-strong: #fcfbff;
  --ink: #0b1c2d;
  --muted: #5f6280;
  --muted-2: #8b929a;
  --line: rgba(93, 39, 158, 0.14);
  --accent: #5d279e;
  --accent-dark: #280c48;
  --accent-soft: rgba(93, 39, 158, 0.12);
  --amber: #4a72b8;
  --amber-soft: rgba(74, 114, 184, 0.16);
  --purple: #890bf7;
  --purple-soft: #f5dff7;
  --violet: #6457ff;
  --violet-soft: #e9e7ff;
  --cyan: #00a7c2;
  --cyan-soft: #dff8fb;
  --orange: #ef8b24;
  --orange-soft: #fff0dc;
  --red: #e25b5b;
  --red-soft: #ffe8e8;
  --paper: #eeeaf4;
  --paper-2: #e7dceb;

  --shadow: 0 22px 55px rgba(93, 39, 158, 0.16);
  --shadow-soft: 0 16px 42px rgba(23, 27, 32, 0.08);
  --radius: 28px;
  --container: 1220px;

  --radius-huge: 42px;
  --radius-large: 36px;
  --radius-small: 16px;
  --radius-tiny: 12px;

}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Vazirmatn, Tahoma, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(
      circle at top right,
      rgba(93, 39, 158, 0.2),
      transparent 26%
    ),
    radial-gradient(
      circle at top left,
      rgba(74, 114, 184, 0.18),
      transparent 22%
    ),
    linear-gradient(180deg, #f8f2ff 0%, var(--bg) 100%);
}