/* design system - base tokens and shared styles */

:root {
    /* typography */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Scale */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 2rem;
    /* 32px */
    --text-4xl: 2.5rem;
    /* 40px */
    --text-5xl: 3.5rem;
    /* 56px */
    --text-6xl: 4.5rem;
    /* 72px */
    --text-huge: 6rem;
    /* 96px */

    /* Leading */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* colors */

    /* Backgrounds - Warm Charcoal */
    --bg-void: #0d0907;
    /* Deep warm black */
    --bg-cosmic: #1a1310;
    /* Main background - warm brown-black */
    --bg-nebula: #241c17;
    /* Secondary background - warm charcoal */

    /* Gradients (Warm Sunset Theme) */
    --grad-aurora: linear-gradient(135deg, #f59e0b 0%, #fb7185 100%);
    --grad-nebula: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --grad-sunset: linear-gradient(135deg, #FF512F 0%, #DD2476 100%);
    --grad-emerald: linear-gradient(135deg, #f59e0b 0%, #fb7185 100%);
    --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    --grad-glow: radial-gradient(circle at center, rgba(245, 158, 11, 0.15) 0%, transparent 70%);

    /* Solid Accents - Warm Palette */
    --accent-primary: #f59e0b;
    /* Warm Amber */
    --accent-secondary: #fb7185;
    /* Coral Pink */
    --accent-success: #34d399;
    /* Warm Emerald */
    --accent-warning: #fbbf24;
    /* Golden Yellow */
    --accent-danger: #f87171;
    /* Soft Red */

    /* Text */
    --text-primary: #fffbeb;
    --text-secondary: #d6d3d1;
    /* Warm Stone 300 */
    --text-muted: #a8a29e;
    /* Stone 400 */
    --text-highlight: #fef3c7;
    /* Amber 100 */

    /* Glassmorphism Borders */
    --glass-border: 1px solid rgba(251, 191, 36, 0.12);
    --glass-border-light: 1px solid rgba(251, 191, 36, 0.2);
    --glass-shine: 1px solid rgba(255, 255, 255, 0.3);

    /* Shadows (Glows) - Warm */
    --glow-sm: 0 0 10px rgba(245, 158, 11, 0.3);
    --glow-md: 0 0 20px rgba(245, 158, 11, 0.4);
    --glow-lg: 0 0 40px rgba(245, 158, 11, 0.5);

    /* spacing & layout */
    --container-width: 1200px;
    --header-height: 80px;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 9999px;

    /* animation easings */
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- utility classes -- */

/* Glass Base */
.glass-panel {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-panel-light {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--glass-border-light);
}

/* Text Gradients */
.text-gradient {
    background: var(--grad-aurora);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: var(--grad-nebula);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* noise overlay - disabled, was too heavy on mobile */
.bg-noise {
    display: none;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-void);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Force dark options for select */
select option {
    background-color: var(--bg-void);
    color: white;
}

.currency-select {
    max-width: 140px;
    padding: 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* background effects */

/* Animated Gradient Background - Warm Sunset */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            #0d0907 0%,
            #1a1310 25%,
            #2d1f18 50%,
            #1a1310 75%,
            #0d0907 100%);
    z-index: -3;
    pointer-events: none;
}

/* Floating Orbs - Warm Sunset Colors */
.floating-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: -2;
    opacity: 0.6;
    will-change: transform;
    contain: layout style paint;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: floatOrb 12s ease-in-out infinite;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 113, 133, 0.15) 0%, transparent 70%);
    top: 40%;
    right: -150px;
    animation: floatOrb 15s ease-in-out infinite reverse;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    bottom: -100px;
    left: 30%;
    animation: floatOrb 18s ease-in-out infinite;
}

@keyframes floatOrb {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(30px, -20px);
    }

    50% {
        transform: translate(-20px, 30px);
    }

    75% {
        transform: translate(20px, 20px);
    }
}

/* extra accent vars (added later) */
:root {
    --accent-amber: #f59e0b;
    --accent-coral: #fb7185;
    --grad-aurora-enhanced: linear-gradient(135deg, #f59e0b 0%, #fb7185 50%, #fbbf24 100%);
    --grad-cosmic: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .floating-orb {
        display: none;
    }
}

/* Print stylesheet */
@media print {
    body::before,
    .floating-orb,
    .bg-noise,
    .navbar,
    .nav-toggle,
    footer,
    .share-section,
    .calculate-btn,
    .ad-container,
    ins.adsbygoogle {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .glass-panel, .glass-panel-light {
        background: #fff !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    .text-gradient {
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }
    a { color: #000 !important; text-decoration: underline !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}