@use '../base/variables' as *;
@use '../base/mixins' as *;

.container {
    max-width: $breakpoint-wrapper;
    margin: 0 auto;
    margin-bottom: $footer-mask-height;
    padding: $spacing-md $spacing-lg;
    width: 100%;
    
    @include above-wrapper-breakpoint {
      padding: $spacing-md 0;
    }
}

.content {
    background: $color-light;
    padding: $spacing-lg;
    border-radius: $radius-md;
    box-shadow: $shadow;
}

.btn {
    padding: $spacing-sm $spacing-md;
    border: none;
    border-radius: $radius-sm;
    font-size: $font-size-base;
    cursor: pointer;
    transition: background 0.2s;

    &-primary {
        background: $color-primary;
        color: $color-light;

        &:hover {
            background: $color-primary-dark;
        }
    }

    &-secondary {
        background: $color-primary-dark;
        color: $color-light;

        &:hover {
            background: $color-dark;
        }
    }

    &:disabled {
        background: $color-primary-lighter;
        cursor: not-allowed;
    }
}

// ==========================================================================
// Classes de couleurs - Design System Galta 2026
// ==========================================================================

// Classes de couleurs d'arrière-plan
.bg-beige-light {
  background-color: $color-neutral;
}

.bg-beige {
  background-color: $color-primary-lighter;
}

.bg-marron {
  background-color: $color-primary;
}

.bg-green {
  background-color: $color-secondary;
}

.bg-dark {
  background-color: $color-dark;
}

.bg-light {
  background-color: $color-light;
}

// Classes de couleurs de texte
.text-marron {
  color: $color-primary;
}

.text-marron-dark {
  color: $color-primary-dark;
}

.text-dark {
  color: $color-dark;
}

.text-light {
  color: $color-light;
}

.text-muted {
  color: $color-primary-dark;
  font-size: 14px;
}