:root {
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --surface-3: #F4F4F5;
  --border: #E4E4E7;
  --border-strong: #D4D4D8;

  --text: #18181B;
  --text-2: #52525B;
  --text-muted: #A1A1AA;

  --control-bg: #FFFFFF;
  --control-hover: #F4F4F5;

  --primary-color: #2759A2;
  --primary: var(--primary-color);
  --primary-700: color-mix(in srgb, var(--primary-color) 80%, #000);
  --primary-600: color-mix(in srgb, var(--primary-color) 90%, #000);
  --primary-50: color-mix(in srgb, var(--primary-color) 8%, #fff);
  --primary-100: color-mix(in srgb, var(--primary-color) 18%, #fff);
  --on-primary: #FFFFFF;

  --sb-bg: #FFFFFF;
  --sb-bg-2: #FAFAFA;
  --sb-text: #52525B;
  --sb-text-dim: #A1A1AA;
  --sb-strong: #18181B;
  --sb-hover: #F4F4F5;
  --sb-active: #F0F0F1;
  --sb-active-text: #18181B;
  --sb-border: #E4E4E7;

  --ok: #007A34;       --ok-bg: #E6F9EA;
  --warn: #925200;     --warn-bg: #FFF1E0;
  --danger: #B7191C;   --danger-bg: #FFEDE9;
  --info: #0071A2;     --info-bg: #E1F8FF;
  --muted: #6B727C;    --muted-bg: #EDF0F6;
  --purple: #5E4784;   --purple-bg: #F4F0FE;
  --orange: #A34100;   --orange-bg: #FFEFE3;
  --teal: #007B7E;     --teal-bg: #DFFAF9;
  --pink: #833B48;     --pink-bg: #FFEDEF;

  --ok-solid: #36AC62;
  --warn-solid: #C68206;
  --danger-solid: #E86156;
  --info-solid: #00A3D6;
  --muted-solid: #8D939C;
  --primary-solid: color-mix(in srgb, var(--primary-color) 62%, #fff);

  --radius: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --sb-w: 264px;
  --sb-w-collapsed: 74px;

  --shadow-sm: 0 1px 2px rgba(24, 30, 40, .06);
  --shadow: 0 2px 8px rgba(24, 30, 40, .07), 0 1px 2px rgba(24, 30, 40, .05);
  --shadow-lg: 0 18px 44px rgba(18, 24, 34, .18);
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
  --shadow-primary: 0 3px 10px color-mix(in srgb, var(--primary-color) 28%, transparent);
  --scrim: rgba(24, 30, 40, .45);
  --scroll-thumb: #C9CED6;
  --scroll-thumb-hover: #B2B8C1;

  --font: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --secondary-color: var(--primary-700);
  --accent-color: var(--primary-color);
  --success-color: var(--ok);
  --warning-color: var(--warn);
  --danger-color: var(--danger);
  --success: var(--ok);
  --warning: var(--warn);
  --secondary: var(--text-2);
  --text-secondary: var(--text-2);
  --hover: var(--surface-2);
  --gray-50: var(--surface-2);
  --gray-100: var(--surface-3);
  --gray-200: var(--border);
  --gray-300: var(--border-strong);
  --gray-600: var(--text-2);
  --gray-700: var(--text);
  --gray-800: var(--text);
  --gray-900: var(--text);
  --shadow-md: var(--shadow);
}

.theme-dark {
  --bg: #0A0A0A;
  --surface: #121212;
  --surface-2: #0F0F0F;
  --surface-3: #1C1C1C;
  --border: #262626;
  --border-strong: #333333;

  --text: #FAFAFA;
  --text-2: #A3A3A3;
  --text-muted: #737373;

  --control-bg: #171717;
  --control-hover: #232323;

  --primary: var(--primary-color);
  --primary-700: color-mix(in srgb, var(--primary-color) 45%, #fff);
  --primary-600: color-mix(in srgb, var(--primary-color) 72%, #fff);
  --primary-50: color-mix(in srgb, var(--primary-color) 30%, #000);
  --primary-100: color-mix(in srgb, var(--primary-color) 48%, #000);
  --on-primary: #FFFFFF;

  --sb-bg: #111111;
  --sb-bg-2: #0C0C0C;
  --sb-text: #A3A3A3;
  --sb-text-dim: #737373;
  --sb-strong: #FAFAFA;
  --sb-hover: #1C1C1C;
  --sb-active: #242424;
  --sb-active-text: #FAFAFA;
  --sb-border: #222222;

  --ok: #6CC185;       --ok-bg: #183B23;
  --warn: #D69F56;     --warn-bg: #452D0A;
  --danger: #FC8175;   --danger-bg: #4D2622;
  --info: #41BAE4;     --info-bg: #01394A;
  --muted: #A5ABB4;    --muted-bg: #2B2F35;
  --purple: #B39FD9;   --purple-bg: #342B44;
  --orange: #E79363;   --orange-bg: #4B2915;
  --teal: #25C2C2;     --teal-bg: #003C3C;
  --pink: #DA959E;     --pink-bg: #44262B;

  --ok-solid: #53B674;
  --warn-solid: #CE9039;
  --danger-solid: #EE7469;
  --info-solid: #00AFDD;
  --muted-solid: #9AA0A9;
  --primary-solid: color-mix(in srgb, var(--primary-color) 70%, #fff);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34);
  --shadow: 0 2px 10px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 40%, transparent);
  --shadow-primary: 0 3px 10px rgba(0, 0, 0, .4);
  --scrim: rgba(6, 10, 16, .62);
  --scroll-thumb: #333333;
  --scroll-thumb-hover: #474747;
}