/* Common utility classes for DRY styling across the application */
/* Import color variables */
@import url("colors.03fd68ce37a5.css");

/* Overlay utilities - updated for light theme */
.overlay-light-60 {
    background-color: rgba(255, 255, 255, 0.6);
}

.overlay-light-70 {
    background-color: rgba(255, 255, 255, 0.7);
}

.overlay-light-80 {
    background-color: rgba(255, 255, 255, 0.8);
}

.overlay-light-90 {
    background-color: rgba(255, 255, 255, 0.9);
}

.overlay-dark-10 {
    background-color: rgba(35, 31, 32, 0.1);
}

.overlay-dark-20 {
    background-color: rgba(35, 31, 32, 0.2);
}

/* Border utilities - updated for light theme */
.border-primary {
    border: 1px solid var(--color-border);
}

.border-primary-2 {
    border: 2px solid var(--color-border);
}

/* Border radius utilities */
.rounded-10 {
    border-radius: 10px;
}

.rounded-12 {
    border-radius: 12px;
}

/* Background utilities - updated for light theme */
.bg-form-color {
    background-color: var(--color-form-bg);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-site-color {
    background-color: var(--color-background);
}

/* Full-screen wrapper */
.fullscreen-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Cursor utilities */
.cursor-pointer {
    cursor: pointer;
}

/* Display utilities */
.display-none {
    display: none;
}

/* Text utilities */
.text-nowrap {
    white-space: nowrap;
}

/* Width utilities */
.max-width-80 {
    max-width: 80px;
}

.max-width-250 {
    max-width: 250px;
}

.max-width-400 {
    max-width: 400px;
    width: 100%;
}

/* Common card styles - updated for light theme */
.card-light-overlay {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

/* Shadow utilities - updated for light theme */
.shadow-sm-dark {
    box-shadow: 0px 2px 4px rgba(35, 31, 32, 0.1);
}

.shadow-md-dark {
    box-shadow: 0px 4px 8px rgba(35, 31, 32, 0.15);
}

.shadow-lg-dark {
    box-shadow: 0px 8px 16px rgba(35, 31, 32, 0.2);
}