@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Roboto', sans-serif;
}

[x-cloak] {
    display: none !important;
}

/* Elegant hover animations for tool cards */
.card-hover {
    font-family: 'Roboto', sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.dark .card-hover:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}

/* Custom scrollbar to match es.html hiding scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Base definitions for old cards if used in other files temporarily */
.premium-card {
    background: white;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
}

.dark .premium-card {
    background: #1e293b;
    /* slate-800 */
    border-color: #334155;
    /* slate-700 */
}

.dark .premium-card:hover {
    border-color: #475569;
    /* slate-600 */
}

input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #6366f1;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #6366f1;
}