:root {
  /* Colors */
  --color-bg: #1d232a; /*background*/
  --color-surface: #191E24;

  --color-on-secondary:#fff;

  --color-primary: #ecf9ff; /*text*/
  --color-on-primary: #6801f9; /*button primary*/
  --color-primary-600: #6a4ef9;

  --color-secondary: #c8c8c8; /*btn secondary*/
  --color-muted: #464d53;
  --color-success: #482CC7;
  --color-border: #11202b;
  --color-danger: #ef4444;

  --gradient-primary: linear-gradient(90deg, #6800f9 40%, #a805d0 74%);
  --gradient-secondary: linear-gradient(180deg, #6800f9 40%, #a805d0 74%);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
  --fs-0: 0.75rem; /* 12px */
  --fs-1: 0.875rem; /* 14px */
  --fs-2: 1rem; /* 16px */
  --fs-3: 1.125rem; /* 18px */
  --fs-4: 1.8rem; /* 30px */
  --fs-5: 2.5rem; /* 40px */
  --fs-6: 3rem; /* 48px */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  /* Radii & shadows */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);

  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}