/* Base styles */
body {
    font-family: 'Manrope', sans-serif;
    background-color: rgb(15, 33, 65);
    margin: 0;
    padding: 0;
}

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.bottom-8 { bottom: 2rem; }
.z-50 { z-index: 50; }

.hidden { display: none; }
.overflow-y-auto { overflow-y: auto; }

/* Sizing */
.min-h-screen { min-height: 100vh; }
.min-h-\[75vh\] { min-height: 75vh; }
.w-full { width: 100%; }
.w-8 { width: 2rem; }
.w-24 { width: 6rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.h-24 { height: 6rem; }
.h-auto { height: auto; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-h-\[90vh\] { max-height: 90vh; }

/* Mondrian bar widths/heights */
.w-\[10\%\] { width: 10%; }
.w-\[15\%\] { width: 15%; }
.w-\[20\%\] { width: 20%; }
.w-\[25\%\] { width: 25%; }
.w-\[30\%\] { width: 30%; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }
.h-2\/3 { height: 66.666667%; }

/* Spacing */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-px { padding: 1px; }
.mr-4 { margin-right: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-px { gap: 1px; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-12 > * + * { margin-top: 3rem; }

/* Borders & Corners */
.border-b { border-bottom-width: 1px; }
.border-b-2 { border-bottom-width: 2px; }
.border-slate-grey { border-color: rgb(150, 158, 170); }
.border-opacity-30 { border-color: rgba(150, 158, 170, 0.3); }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }

/* Typography */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.font-light { font-weight: 300; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.tracking-wider { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.underline { text-decoration-line: underline; }

/* Colors - Text */
.text-white { color: white; }
.text-deep-navy { color: rgb(15, 15, 71); }
.text-denim-blue { color: rgb(65, 90, 140); }
.text-cadet-blue { color: rgb(90, 135, 185); }
.text-terracotta-red { color: rgb(194, 88, 75); }
.text-golden-ochre { color: rgb(224, 168, 58); }
.text-light-steel { color: rgb(220, 224, 230); }
.text-slate-grey { color: rgb(150, 158, 170); }
.text-charcoal-grey { color: rgb(75, 80, 90); }

/* Colors - Background */
.bg-white { background-color: white; }
.bg-black { background-color: black; }
.bg-opacity-60 { background-color: rgba(0, 0, 0, 0.6); }
.bg-deep-navy { background-color: rgb(15, 15, 71); }
.bg-denim-blue { background-color: rgb(65, 90, 140); }
.bg-cadet-blue { background-color: rgb(90, 135, 185); }
.bg-terracotta-red { background-color: rgb(194, 88, 75); }
.bg-burnt-orange { background-color: rgb(210, 125, 65); }
.bg-golden-ochre { background-color: rgb(224, 168, 58); }
.bg-light-steel { background-color: rgb(220, 224, 230); }
.bg-slate-grey { background-color: rgb(150, 158, 170); }
.bg-charcoal-grey { background-color: rgb(75, 80, 90); }

/* Hover states */
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:text-golden-ochre:hover { color: rgb(224, 168, 58); }
.hover\:text-terracotta-red:hover { color: rgb(194, 88, 75); }
.hover\:brightness-125:hover { filter: brightness(1.25); }

/* Transitions */
.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* Animations */
.scroll-indicator {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-5px); }
}

.mondrian-bar {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mondrian-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Modal content styles */
.modal-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgb(15, 15, 71);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.modal-content p {
    line-height: 1.625;
    margin-bottom: 1rem;
}

.modal-content a {
    color: rgb(65, 90, 140);
}

.modal-content a:hover {
    text-decoration: underline;
}

.modal-content hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Responsive styles */
@media (min-width: 640px) {
    .sm\:p-4 { padding: 1rem; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:p-8 { padding: 2rem; }
    .sm\:p-12 { padding: 3rem; }
    .sm\:text-4xl { font-size: 2.25rem; }
}

@media (min-width: 768px) {
    .md\:p-12 { padding: 3rem; }
    .md\:text-xl { font-size: 1.25rem; }
    .md\:text-5xl { font-size: 3rem; }
}