html {
    scroll-behavior: smooth
}

:root {
    --background: 220 15% 8%;
    --foreground: 40 20% 95%;
    --card: 220 12% 12%;
    --card-elevated: 220 12% 15%;
    --primary: 43 80% 55%;
    --primary-foreground: 220 15% 8%;
    --secondary: 220 10% 18%;
    --secondary-foreground: 40 15% 85%;
    --muted: 220 10% 16%;
    --muted-foreground: 220 10% 55%;
    --border: 220 10% 20%;
    --gold: 43 80% 55%;
    --gold-muted: 43 40% 35%;
    --gold-light: 43 70% 70%
}

* {
    box-sizing: border-box
}

body {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

h1,
h2,
h3,
.font-display {
    font-family: 'Playfair Display', serif
}

.page-shell {
    max-width: 32rem;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
    background: hsl(var(--background))
}

.text-muted {
    color: hsl(var(--muted-foreground))
}

.text-gold {
    color: hsl(var(--gold))
}

.gold-gradient {
    background: linear-gradient(135deg, hsl(43 80% 55%), hsl(43 60% 45%))
}

.gold-text-gradient {
    background: linear-gradient(135deg, hsl(43 80% 60%), hsl(43 60% 45%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.card-premium,
.card-premium-hover {
    background: hsl(var(--card));
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .2)
}

.card-premium-hover {
    transition: all .3s ease-out
}

.card-premium-hover:hover {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    border-color: rgba(212, 167, 55, .20);
    transform: translateY(-2px)
}

.card-premium-hover:active {
    transform: scale(.98)
}

.scrollbar-hide::-webkit-scrollbar {
    display: none
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.bottom-safe {
    padding-bottom: 6.2rem
}

.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0)
}

.modal-backdrop {
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px)
}

.hidden-force {
    display: none !important
}

.animate-fade-up {
    animation: fadeUp .6s cubic-bezier(0.16, 1, 0.3, 1) both
}

.animate-fade-in {
    animation: fadeIn .5s cubic-bezier(0.16, 1, 0.3, 1) both
}

.animate-scale-in,
.animate-modal-in {
    animation: scaleIn .4s cubic-bezier(0.16, 1, 0.3, 1) both
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(4px)
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        filter: blur(4px)
    }

    to {
        opacity: 1;
        filter: blur(0)
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}