/* Shared overrides for chonks-ui across all pages */

/* Reset chonks scrollbar styling to browser defaults */
* {
    scrollbar-color: auto !important;
    scrollbar-width: auto !important;
}
::-webkit-scrollbar {
    all: initial !important;
}
::-webkit-scrollbar-thumb {
    all: initial !important;
}
::-webkit-scrollbar-track {
    all: initial !important;
}

/* Ensure minimum bottom margin on all pages */
body {
    padding-bottom: 80px !important;
}

/* Default h1 styling consistent across all pages */
h1 {
    text-align: center;
    margin-bottom: 32px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

/* Subtitle styling */
.subtitle {
    text-align: center;
    margin-bottom: 48px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Mobile padding - prevent edge-to-edge content */
@media (max-width: 768px) {
    body {
        padding: 40px 20px 60px 20px !important;
    }

    h1 {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .subtitle {
        font-size: 10px;
        margin-bottom: 32px;
    }

    .container {
        padding: 0 !important;
    }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Shadow Utilities - Consistent Chonks-style shadows */
.shadow-sm {
    box-shadow: 3px 3px 0 #2C3E50 !important;
}

.shadow-md {
    box-shadow: 4px 4px 0 #2C3E50 !important;
}

.shadow-lg {
    box-shadow: 6px 6px 0 #2C3E50 !important;
}

/* Card Utilities - Standard card patterns */
.card {
    background: #fff;
    border: 3px solid #2C3E50;
    box-shadow: 4px 4px 0 #2C3E50;
    padding: 24px;
}

.card-lg {
    background: #fff;
    border: 3px solid #2C3E50;
    box-shadow: 6px 6px 0 #2C3E50;
    padding: 32px;
}

.card-sm {
    background: #fff;
    border: 3px solid #2C3E50;
    box-shadow: 3px 3px 0 #2C3E50;
    padding: 16px;
}

/* Button Variants - Common button patterns */
.btn {
    background: #fff;
    border: 3px solid #2C3E50;
    box-shadow: 4px 4px 0 #2C3E50;
    padding: 12px 24px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.1s;
}

.btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #2C3E50;
}

.btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #2C3E50;
}

.btn-primary {
    background: #2C3E50;
    color: #fff;
}

.btn-primary:hover {
    background: #34495E;
}

.btn-danger {
    background: #E74C3C;
    border-color: #2C3E50;
    color: #fff;
}

.btn-danger:hover {
    background: #C0392B;
}

/* Spacing Utilities - Consistent spacing scale */
:root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
}

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

/* Typography Utilities */
.text-primary {
    color: #2C3E50;
}

.text-muted {
    color: #888;
}

.text-light {
    color: #666;
}

.font-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.font-weight-normal {
    font-weight: 400;
}

.font-weight-semibold {
    font-weight: 600;
}

.font-weight-bold {
    font-weight: 700;
}