/* 
  Unlock Lucide icons from their default inline values:
  - Override the fixed 24x24 size so icons can scale with font-size (1em)
  - Override the default stroke-width injected inline
  - Use currentColor so icons inherit color from CSS normally
  - Allows full styling through: width, height, font-size, color, and stroke-width
*/
svg[data-lucide] {
    width: 1em !important;
    height: 1em !important;
    stroke-width: 2 !important;
    stroke: currentColor;
}

/* button variations */

.btn {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-lg);
    color: var(--color-bg);

    background-color: var(--color-primary);
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius-lg);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border: none;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.btn-outline {
  background-color: var(--color-bg);
  border: var(--border-sm) solid var(--color-primary);
  color: var(--color-text);
  transition: 
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}

/* button sizes */
.btn-sm {
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-md);
}

/* button effects */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: var(--color-primary-hover);
    color: var(--color-bg);
  }
  .btn-outline:hover, 
  .btn-outline:focus {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
  }
}

/* container */
.container {
  width: 100%;
  height: 100%;
  max-width: 1400px;      
  margin-left: auto;
  margin-right: auto;

  padding: var(--container-padding-vertical) var(--container-padding-horizontal);
}