/* Global Resets & Typography */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-mono {
    font-family: 'Roboto Mono', monospace;
    font-variant-numeric: tabular-nums;
}

/* Scrollbar Hiding */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes pulse-soft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.95); opacity: 0.8; }
}

.animate-pulse-soft {
    animation: pulse-soft 2s infinite ease-in-out;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

/* Tool Card Hover Effects */
.tool-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Dark Mode Transitions */
.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Custom Range Input */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #3b82f6;
    margin-top: -8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e2e8f0;
    border-radius: 2px;
}
.dark input[type=range]::-webkit-slider-runnable-track {
    background: #3f3f46;
}

/* Fullscreen Utilities */
:fullscreen {
    background-color: white;
    width: 100vw;
    height: 100vh;
    padding: 2rem;
    overflow-y: auto;
}
.dark :fullscreen {
    background-color: #09090b;
}

/* Switch Toggle */
.toggle-checkbox:checked {
    right: 0;
    border-color: #10b981;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #10b981;
}

/* Mobile Typography Overrides */
@media (max-width: 480px) {
    .tool-card h3 {
        font-size: 1.6rem; /* 20px */
        color: blue;
    }
}

/* Tesktop Typography Overrides */
@media (min-width: 768px) {
    .tool-card h3 {
        font-size: 1.6rem; /* 20px */
        color: blue;
    }
}

/* Subtitle (Description) Typography Overrides */

/* Mobile Version (Default) */
.tool-card p {
    font-size: 18px; /* Adjust this value for mobile */
}

/* Desktop Version (Screens larger than 768px) */
@media (min-width: 768px) {
    .tool-card p {
        font-size: 22px; /* Adjust this value for desktop */
    }
}