:root {
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-soft: #f8f9fd;
    --text: #171b29;
    --muted: #737b8c;
    --subtle: #a1a8b6;
    --line: #e6e9f0;
    --brand: #4f46e5;
    --brand-2: #16a085;
    --warning: #b7791f;
    --danger: #e15252;
    --shadow: 0 18px 48px rgba(25, 31, 50, .12);
    --safe-bottom: env(safe-area-inset-bottom);
    --vh: 1vh;
    --duration: .28s;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slide-down {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

@keyframes press {
    50% { transform: scale(.96); }
}