/* Finaya Design System */

/* CSS Variables for brand colors */
:root {
    --finaya-primary: #6366f1;  /* Indigo-500 */
    --finaya-primary-hover: #4f46e5;  /* Indigo-600 */
    --finaya-primary-dark: #4338ca;  /* Indigo-700 */
    --finaya-border-light: #e5e7eb;  /* Gray-200 */
    --finaya-text-primary: #111827;  /* Gray-900 */
    --finaya-text-secondary: #6b7280;  /* Gray-500 */
}

/* Button Base Styles */
.btn-finaya {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-finaya:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.btn-finaya:focus-visible {
    outline: 2px solid var(--finaya-primary);
    outline-offset: 2px;
}

/* Primary Button */
.btn-finaya-primary {
    background-color: var(--finaya-primary);
    color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-finaya-primary:hover {
    background-color: var(--finaya-primary-hover);
}

.btn-finaya-primary:active {
    background-color: var(--finaya-primary-dark);
}

.btn-finaya-primary:focus-visible {
    outline-color: var(--finaya-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Sidebar Styles */
.sidebar-finaya {
    background-color: #f1f5f9;  /* Slate-100 */
    border-right: 1px solid #e2e8f0;  /* Slate-200 */
}

.sidebar-link-finaya {
    transition: all 0.15s ease-in-out;
}

.sidebar-link-finaya:hover {
    background-color: #e2e8f0;  /* Slate-200 */
}

.sidebar-link-finaya.active {
    background-color: #eef2ff;  /* Indigo-50 */
    color: #4f46e5;  /* Indigo-600 */
}