/* Variables */
:root {
  /* Colors */
  --example-primary: #007bff;
  --example-secondary: #6c757d;
  /* Spacing */
  --example-spacing: 1rem;
  --example-padding: 0.5rem;
  /* Typography */
  --example-font: system-ui, sans-serif;
  --example-size: 16px;
}

/* General Styles */
.example-wrapper {
  font-family: var(--example-font);
  padding: var(--example-spacing);
}

/* Button Component */
.btn-example {
  padding: var(--example-padding);
  background: var(--example-primary);
  color: white;
}

.btn-example-alt {
  padding: var(--example-padding);
  background: var(--example-secondary);
  color: white;
}

/* Card Component */
.card-example {
  border: 1px solid var(--example-secondary);
  padding: var(--example-spacing);
}