:root {
    --accent-blue: #0ab5cc;     /* light blue - accent */
    --primary-blue: #1b86c4;    /* medium blue - primary */
    --secondary-blue: #1c4866;  /* dark blue - secondary */
}
  
* {
    font-family: 'Roboto', sans-serif;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.bg-brand-gradient {
    background: linear-gradient(to right, var(--primary-blue), var(--secondary-blue));
}

.bg-brand-button {
    background: linear-gradient(to right, var(--primary-blue), var(--secondary-blue));
}

.bg-brand-button:hover {
    background: linear-gradient(to right, var(--secondary-blue), #0f3549);
}

.text-brand-accent { color: var(--accent-blue); }
.text-brand-primary { color: var(--primary-blue); }
.text-brand-secondary { color: var(--secondary-blue); }

.border-brand-primary { border-color: var(--primary-blue); }
.border-brand-accent { border-color: var(--accent-blue); }

.focus-brand:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(27, 134, 196, 0.2);
}

.focus-brand-accent:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(10, 181, 204, 0.2);
}