@import 'tailwindcss';

@theme {
    /* Fuentes */
    --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;

    /* Colores Lined */
    --color-brand-black:       #0A0A0A;
    --color-brand-black-soft:  #1A1A1A;
    --color-brand-green:       #22C55E;
    --color-brand-green-dark:  #16A34A;
    --color-brand-green-light: #DCFCE7;
    --color-brand-green-glow:  rgba(34, 197, 94, 0.15);

    --color-brand-gray-50:  #FAFAFA;
    --color-brand-gray-100: #F5F5F5;
    --color-brand-gray-200: #E5E5E5;
    --color-brand-gray-300: #D4D4D4;
    --color-brand-gray-400: #A3A3A3;
    --color-brand-gray-500: #737373;
    --color-brand-gray-600: #525252;
    --color-brand-gray-700: #404040;
}

/* Fix autofill en tema oscuro */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
    -webkit-box-shadow: 0 0 0 1000px #161616 inset !important;
    box-shadow: 0 0 0 1000px #161616 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

input:-webkit-autofill:focus,
input:-internal-autofill-selected:focus {
    border-color: #22C55E !important;
}