body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.keyName {
    font-size: 1.5rem;
    text-spacing-trim: 1.5rem;
    color: rgb(7, 177, 72);
}

.brand {
    font-family: 'Monoton', ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    color: #f74600;
    transition: color 0.3s ease;
}

#generated-password {
    border-style: dashed;
    border-width: 2px;
}

.dark {
    background-color: #16161d;
    color: #d4e3ec;
}

.dark .dark\:bg-gray-700 {
    background-color: #4a5568;
}

.dark .dark\:bg-gray-800 {
    background-color: #000;
}

.dark .dark\:bg-gray-900 {
    background-color: #16161d;
}

.dark .dark\:text-white {
    color: #c9cacc;
}

.dark .dark\:text-gray-300 {
    color: #cbd5e0;
}

.dark .dark\:text-gray-400 {
    color: #a0aec0;
}

.dark .dark\:border-gray-600 {
    border-color: #4a5568;
}

.dark .dark\:hidden {
    display: none;
}

.dark .dark\:block {
    display: block;
}

.dark .dark\:text-blue-400 {
    color: #63b3ed;
}

.dark .dark\:text-blue-300 {
    color: #90cdf4;
}

.dark .dark\:hover\:text-blue-300:hover {
    color: #90cdf4;
}