/* SSLAR Studio Photobooth - Clean Studio Aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700;800&display=swap');

:root {
    --bg-studio: #F8FAF9;
    --card-bg: #FFFFFF;
    --border-soft: #E2E8F0;
    --border-sage: #C7DBCF;
    --sage-600: #435C4A;
    --sage-700: #394E3E;
    --sage-800: #2F4133;
    --sage-100: #E6EFEA;
    --sage-50:  #F4F8F5;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-studio);
    color: #111827;
    -webkit-tap-highlight-color: transparent;
}

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

/* Figma / Kiosk Sage Green Button */
.btn-sage {
    background-color: #435C4A;
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 0.875rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px 0 rgba(67, 92, 74, 0.25);
}

.btn-sage:hover {
    background-color: #394E3E;
    box-shadow: 0 6px 18px 0 rgba(67, 92, 74, 0.35);
    transform: translateY(-1px);
}

.btn-sage:active {
    transform: scale(0.98);
}

/* Secondary Button */
.btn-secondary {
    background-color: #F4F8F5;
    color: #394E3E;
    font-weight: 700;
    border: 1px solid #C7DBCF;
    border-radius: 0.875rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
    background-color: #E6EFEA;
    color: #2F4133;
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: scale(0.98);
}

/* Polaroid Card Style */
.polaroid-frame {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
}

.polaroid-frame:hover {
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.08);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #F8FAF9;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}