:root {
  --dark2: #f4f4f6;
  --dark3: #f1f1f3;
  --dark4: #f9f9f9;
  --dark5: #eaeaea;
  --light2: #0f1219;
  --light3: #1a1e29;
  --light4: #2e374a;
}

[data-theme="dark"] {
  --primary: red;
}

@theme {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --breakpoint-3xl: 1600px;
  --breakpoint-4xl: 1800px;

  --color-dark2: var(--dark2);
  --color-dark3: var(--dark3);
  --color-dark4: var(--dark4);
  --color-dark5: var(--dark5);
  --color-primary: var(--primary);
  --color-light2: var(--light2);
  --color-light3: var(--light3);
  --color-light4: var(--light4);
  --color-secondary: var(--secondary);
  --color-danger: #dc2626;
}