/* Variables */
:root {
  /* Colors */
  --primary: #007bff;
  --primary: blue;
  --secondary: #6c757d;
  --secondary: red;
  --prime-red: rgb(255, 0, 0);
  /* auto generated shades */
  --primary-lighter: hsl(from var(--primary) h s 80%);
  --primary-light: hsl(from var(--primary) h s 65%);
  --primary-medium: hsl(from var(--primary) h s 50%);
  --primary-dark: hsl(from var(--primary) h s 35%);
  --primary-darker: hsl(from var(--primary) h s 20%);
  /* Spacing */
  --example-spacing: 1rem;
  --example-padding: 0.5rem;
  --spacing-scale: 1.5;
  --space-m: clamp(1rem, 4vw, 64px);
  --grid-gap: 1.5rem;
  --space-xxs: calc(var(--space-xs) / var(--spacing-scale));
  --space-xs: calc(var(--space-s) / var(--spacing-scale));
  --space-s: calc(var(--space-m) / var(--spacing-scale));
  --space-l: calc(var(--space-m) * var(--spacing-scale));
  --space-xl: calc(var(--space-l) * var(--spacing-scale));
  --space-xxl: calc(var(--space-xl) * var(--spacing-scale));
  /* 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(--primary);
  color: white;
}
.btn-example:is(:hover, :focus) {
  background: var(--secondary);
}

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

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

.prime-red {
  background-color: var(--prime-red);
}