/* Focus-visible outlines for better accessibility */
*:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
button, input, select, textarea {
    transition: all 0.2s ease-in-out;
}

/* Light mode - warm pastel colors */
body {
    background-color: #fef7ed;
}

.bg-white {
    background-color: #fff7ed;
}

.bg-gray-50 {
    background-color: #fef7ed;
}

.bg-gray-200 {
    background-color: #fed7aa;
}

.bg-gray-300 {
    background-color: #fdba74;
}

.bg-gray-500 {
    background-color: #f97316;
}

.bg-gray-600 {
    background-color: #ea580c;
}

.border-gray-300 {
    border-color: #fed7aa;
}

.text-gray-700 {
    color: #92400e;
}

.text-gray-600 {
    color: #a16207;
}

.text-gray-900 {
    color: #451a03;
}

/* Active state for tip buttons - warm blue */
.tip-btn.active {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.tip-btn.active:hover {
    background-color: #2563eb;
}

/* Tip buttons - warm pastel colors */
.tip-btn {
    color: #451a03;
    font-weight: 500;
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
    transition: all 0.2s ease-in-out;
    background-color: #fed7aa;
    border-color: #fdba74;
}

.tip-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
    background-color: #fdba74;
}

/* Reset button - warm colors */
#resetBtn {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
    transition: all 0.2s ease-in-out;
    background-color: #f97316;
}

#resetBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
    background-color: #ea580c;
}

/* Currency selector styling */
#currencySelect {
    min-width: 80px;
    cursor: pointer;
    background-color: #fff7ed;
    border-color: #fed7aa;
}

#currencySelect:focus {
    outline: none;
}

/* Dark mode - cool dark pastel colors */
.dark body {
    background-color: #0f172a;
}

.dark .bg-white {
    background-color: #1e293b;
}

.dark .bg-gray-50 {
    background-color: #0f172a;
}

.dark .bg-gray-200 {
    background-color: #334155;
}

.dark .bg-gray-300 {
    background-color: #475569;
}

.dark .bg-gray-500 {
    background-color: #64748b;
}

.dark .bg-gray-600 {
    background-color: #475569;
}

.dark .bg-gray-700 {
    background-color: #334155;
}

.dark .bg-gray-800 {
    background-color: #1e293b;
}

.dark .bg-gray-900 {
    background-color: #0f172a;
}

.dark .border-gray-600 {
    border-color: #475569;
}

/* Dark mode text colors - ensuring high contrast */
.dark .text-gray-300 {
    color: #e2e8f0;
}

.dark .text-gray-600 {
    color: #cbd5e1;
}

.dark .text-white {
    color: #f8fafc;
}

.dark .text-gray-900 {
    color: #f8fafc;
}

/* Dark mode labels and headings */
.dark h1 {
    color: #f8fafc;
}

.dark label {
    color: #e2e8f0;
}

.dark .font-medium {
    color: #e2e8f0;
}

.dark .font-semibold {
    color: #f8fafc;
}

.dark .font-bold {
    color: #f8fafc;
}

/* Dark mode tip buttons - cool colors */
.dark .tip-btn {
    color: #f1f5f9;
    background-color: #334155;
    border-color: #475569;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .tip-btn:hover {
    background-color: #475569;
    color: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Active state overrides for dark mode - cool blue */
.dark .tip-btn.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

/* Dark mode reset button */
.dark #resetBtn {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    background-color: #64748b;
}

.dark #resetBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    background-color: #475569;
}

/* Dark mode currency selector */
.dark #currencySelect {
    background-color: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

/* Input fields styling */
input[type="number"] {
    background-color: #fff7ed;
    border-color: #fed7aa;
    color: #451a03;
}

/* Dark mode focus outline */
.dark *:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* Dark mode input fields */
.dark input[type="number"] {
    background-color: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

/* Dark mode toggle button styling */
#darkModeToggle {
    background-color: #fed7aa;
    color: #451a03;
}

.dark #darkModeToggle {
    background-color: #334155;
    color: #f8fafc;
}

/* Dark mode toggle icon colors */
.dark #darkModeToggle svg {
    color: #fbbf24;
}

.dark #darkModeToggle:hover svg {
    color: #f59e0b;
}

/* Results panel styling */
.bg-gray-50 {
    background-color: #fef7ed;
}

.dark .bg-gray-50 {
    background-color: #334155;
}

/* Results panel text in dark mode */
.dark .bg-gray-50 span {
    color: #e2e8f0;
}

.dark .bg-gray-50 .font-semibold {
    color: #f8fafc;
}

.dark .bg-gray-50 .font-bold {
    color: #f8fafc;
}

/* Border styling */
.border-gray-200 {
    border-color: #fed7aa;
}

.dark .border-gray-200 {
    border-color: #475569;
}

/* Footer styling */
footer {
    color: #92400e;
    border-top: 1px solid #fed7aa;
}

.dark footer {
    color: #cbd5e1;
    border-top: 1px solid #475569;
}