:root {
  --color-background: #ffffff;
  --color-surface: #faf8ff;
  --color-text: #131132;
  --color-body: #3b3a5a;
  --color-muted: #6f6d8c;
  --color-primary: #6c47ff;
  --color-primary-hover: #5636d6;
  --color-link: #4f2fcc;
  --color-on-primary: #ffffff;
  --color-accent: #9b7bff;
  --color-border: #ebe7f5;
  --color-border-strong: #e2d9ff;
  --color-primary-soft: #f1ecff;
  --color-primary-softer: #f4f0ff;
  --color-primary-ring: #efe9ff;
  --color-dark: #0f0c22;
  --color-on-dark: #c9c6e6;
  --color-code: #e9e6ff;
  --color-success: #18794e;
  --color-success-soft: #e3f6ec;
  --color-success-bar: #2fb26f;
  --color-warning: #a15c00;
  --color-warning-soft: #fff2d9;
  --color-warning-bar: #f5a623;
  --color-danger: #b42318;
  --color-danger-soft: #fde8e8;
  --color-danger-bar: #e5484d;

  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 19px;
  --text-3xl: 22px;
  --text-4xl: 28px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 56px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-card: 22px;
  --radius-panel: 30px;
  --radius-pill: 999px;

  --shadow-card: 0 18px 40px -24px rgba(108, 71, 255, 0.35);
  --width-container: 1336px;
  --gutter: 32px;
  --section: 92px;
}