/* Import variables */
@import 'variables.css';

/* Utility classes for spacing, colors, etc. */

/* Text colors */
.ds-text-white {
    color: var(--color-white) !important;
}

.ds-text-primary {
    color: var(--color-primary) !important;
}

.ds-text-secondary {
    color: var(--color-secondary) !important;
}

/* Backgrounds */
.ds-bg-dark {
    background-color: var(--color-dark-blue) !important;
}

.ds-bg-primary {
    background-color: var(--color-primary) !important;
}

.ds-bg-secondary {
    background-color: var(--color-secondary) !important;
}

.ds-bg-transparent {
    background-color: transparent !important;
}

.ds-bg-card {
    background-color: var(--color-gray-200) !important;
}

/* Padding */
.ds-p-0 {
    padding: 0 !important;
}

.ds-p-xs {
    padding: var(--spacing-xs) !important;
}

.ds-p-sm {
    padding: var(--spacing-sm) !important;
}

.ds-p-md {
    padding: var(--spacing-md) !important;
}

.ds-p-lg {
    padding: var(--spacing-lg) !important;
}

.ds-p-xl {
    padding: var(--spacing-xl) !important;
}

/* X-axis padding */
.ds-px-xs {
    padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
}

.ds-px-sm {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
}

.ds-px-md {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
}

.ds-px-lg {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
}

.ds-px-xl {
    padding-left: var(--spacing-xl) !important;
    padding-right: var(--spacing-xl) !important;
}

/* Y-axis padding */
.ds-py-xs {
    padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
}

.ds-py-sm {
    padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
}

.ds-py-md {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
}

.ds-py-lg {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
}

.ds-py-xl {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
}

/* Margins */
.ds-m-0 {
    margin: 0 !important;
}

.ds-m-xs {
    margin: var(--spacing-xs) !important;
}

.ds-m-sm {
    margin: var(--spacing-sm) !important;
}

.ds-m-md {
    margin: var(--spacing-md) !important;
}

.ds-m-lg {
    margin: var(--spacing-lg) !important;
}

.ds-m-xl {
    margin: var(--spacing-xl) !important;
}

/* Margin top */
.ds-mt-0 {
    margin-top: 0 !important;
}

.ds-mt-xs {
    margin-top: var(--spacing-xs) !important;
}

.ds-mt-sm {
    margin-top: var(--spacing-sm) !important;
}

.ds-mt-md {
    margin-top: var(--spacing-md) !important;
}

.ds-mt-lg {
    margin-top: var(--spacing-lg) !important;
}

.ds-mt-xl {
    margin-top: var(--spacing-xl) !important;
}

/* Margin bottom */
.ds-mb-0 {
    margin-bottom: 0 !important;
}

.ds-mb-xs {
    margin-bottom: var(--spacing-xs) !important;
}

.ds-mb-sm {
    margin-bottom: var(--spacing-sm) !important;
}

.ds-mb-md {
    margin-bottom: var(--spacing-md) !important;
}

.ds-mb-lg {
    margin-bottom: var(--spacing-lg) !important;
}

.ds-mb-xl {
    margin-bottom: var(--spacing-xl) !important;
}

/* Auto margins */
.ds-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ds-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* Flexbox utilities */
.ds-flex {
    display: flex !important;
}

.ds-flex-row {
    flex-direction: row !important;
}

.ds-flex-column {
    flex-direction: column !important;
}

.ds-justify-start {
    justify-content: flex-start !important;
}

.ds-justify-center {
    justify-content: center !important;
}

.ds-justify-end {
    justify-content: flex-end !important;
}

.ds-justify-between {
    justify-content: space-between !important;
}

.ds-justify-around {
    justify-content: space-around !important;
}

.ds-align-start {
    align-items: flex-start !important;
}

.ds-align-center {
    align-items: center !important;
}

.ds-align-end {
    align-items: flex-end !important;
}

.ds-gap-xs {
    gap: var(--spacing-xs) !important;
}

.ds-gap-sm {
    gap: var(--spacing-sm) !important;
}

.ds-gap-md {
    gap: var(--spacing-md) !important;
}

.ds-gap-lg {
    gap: var(--spacing-lg) !important;
}

.ds-gap-xl {
    gap: var(--spacing-xl) !important;
}

.ds-flex-grow-0 {
    flex-grow: 0 !important;
}

.ds-flex-grow-1 {
    flex-grow: 1 !important;
}

.ds-flex-shrink-0 {
    flex-shrink: 0 !important;
}

.ds-flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* Text */
.ds-text-center {
    text-align: center !important;
}

.ds-text-left {
    text-align: left !important;
}

.ds-text-right {
    text-align: right !important;
}

.ds-font-xs {
    font-size: var(--font-size-xs) !important;
}

.ds-font-sm {
    font-size: var(--font-size-sm) !important;
}

.ds-font-md {
    font-size: var(--font-size-md) !important;
}

.ds-font-lg {
    font-size: var(--font-size-lg) !important;
}

.ds-font-xl {
    font-size: var(--font-size-xl) !important;
}

.ds-font-xxl {
    font-size: var(--font-size-xxl) !important;
}

.ds-font-regular {
    font-weight: var(--font-weight-regular) !important;
}

.ds-font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.ds-font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.ds-font-primary {
    font-family: var(--font-family-primary) !important;
}

.ds-font-secondary {
    font-family: var(--font-family-secondary) !important;
}

.ds-font-tertiary {
    font-family: var(--font-family-tertiary) !important;
}

/* Surface utilities - common component styles */
.ds-surface {
    background: var(--color-gray-200);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-md);
    backdrop-filter: var(--blur-effect-xs);
}

.ds-surface--no-backdrop {
    backdrop-filter: none;
}

.ds-surface--strong-blur {
    backdrop-filter: var(--blur-effect-l);
}

.ds-surface--interactive {
    transition: var(--transition-default);
    cursor: pointer;
}

.ds-surface--interactive:hover {
    border-color: var(--border-hover-dark);
}

/* Width utilities */
.ds-w-100 {
    width: 100% !important;
}

/* Container width utilities - for consistent max-width constraints */
.ds-container-constrained {
    width: 100%;
    max-width: var(--width-content-container); /* 370px - for auth forms, modals, etc. */
}

.ds-container-constrained--lg {
    width: 100%;
    max-width: 1200px; /* For main content containers */
}

.ds-container-constrained--sm {
    width: 100%;
    max-width: 280px; /* For smaller modals, tooltips */
}

/* Utility to center constrained containers */
.ds-container-constrained--centered {
    margin-left: auto;
    margin-right: auto;
}

/* Miscellaneous utilities */

.ds-h-100 {
    height: 100% !important;
}

.ds-cursor-pointer {
    cursor: pointer !important;
}

.ds-opacity-light {
    opacity: var(--opacity-light) !important;
}

.ds-opacity-medium {
    opacity: var(--opacity-medium) !important;
}

.ds-opacity-full {
    opacity: var(--opacity-full) !important;
}