/* TipCalc Pro — Custom styles (beyond Tailwind) */

/* Light mode (default) */
:root {
    --bg-primary: #FFFFFF;
    --text-primary: #1D1D1F;
    --accent: #6E6E73;
    --accent-light: #86868B;
    --secondary: #86868B;
    --glow-bg: rgba(110, 110, 115, 0.04);
    --shadow-icon: drop-shadow(0 10px 15px rgb(0 0 0 / 0.08));
}

/* Dark mode */
.dark {
    --bg-primary: #0A0A0A;
    --text-primary: #F5F5F7;
    --accent: #B3B3B3;
    --accent-light: #CCCCCC;
    --secondary: #A1A1A6;
    --glow-bg: rgba(179, 179, 179, 0.05);
    --shadow-icon: drop-shadow(0 25px 25px rgb(0 0 0 / 0.25));
}

/* Smooth theme transitions */
body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Icon shadow (adapts to theme) */
.icon-shadow {
    filter: var(--shadow-icon);
    transition: filter 0.2s ease;
}

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 9999px;
    background: var(--text-primary);
    color: var(--bg-primary);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
    opacity: 0.6;
}

.theme-toggle:hover {
    opacity: 1;
    transform: scale(1.08);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Show sun in dark mode, moon in light mode */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

.dark .theme-toggle .icon-sun { display: block; }
.dark .theme-toggle .icon-moon { display: none; }

/* Hero animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out both;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up {
        animation: none;
    }
    body, .icon-shadow, .theme-toggle {
        transition: none;
    }
}

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}