:root {
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;

  --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 3rem;
  --font-size-4xl: 4rem;
  --font-size-5xl: 5rem;
  --font-size-6xl: 6rem;
  --font-size-7xl: 7rem;
  --font-size-8xl: 8rem;
  --font-size-9xl: 9rem;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-normal: 1.35;

  /* Brand Palette */
  --color-brand: #5024ef;
  --color-brand-light: #333333;
  --color-brand-dark: #090221;

  /* Accent (optional, for highlights) */
  --color-accent: #ffb300;
  --color-accent-light: #ffe082;
  --color-accent-dark: #c68400;

  /* Text */
  --color-text: #090221;
  --color-text-light: #2f2f2f;
  --color-text-inverse: #fff;

  /* Backgrounds */
  --color-bg: #fff;
  --color-bg-light: #f8f9fa;
  --color-bg-dark: #222;

  /* Border */
  --color-border: #ddd;

  /* UI States */
  --color-hover: #f0f0f0;
  --color-active: #e0e0e0;
  --color-focus: #005fcc;
  --color-disabled: #bdbdbd;

  /* Overlay (for modals, menus, etc.) */
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* Gradients (optional) */
  --gradient-brand: linear-gradient(90deg, #000 0%, #333 100%);

  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);

  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
}