/* Shared Saya components */

.button {
    border-radius: var(--saya-radius-sm);
    background: var(--saya-primary);
    border-color: var(--saya-primary);
    transition: background var(--saya-transition),
                border-color var(--saya-transition),
                transform var(--saya-transition),
                box-shadow var(--saya-transition);
}

.button:hover {
    background: var(--saya-primary-dark);
    border-color: var(--saya-primary-dark);
    box-shadow: 0 7px 18px rgba(38, 59, 112, .16);
}

.button-outline {
    background: transparent;
    color: var(--saya-primary);
    border-color: var(--saya-border);
}

.button-outline:hover {
    background: var(--saya-surface-soft);
    color: var(--saya-primary-dark);
}

.panel, .stat-card, .feature-card, .auth-card,
.preview-card, .planner-day {
    border-radius: var(--saya-radius-md);
}

.panel, .stat-card, .feature-card, .auth-card {
    border-color: var(--saya-border);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--saya-secondary) !important;
    box-shadow: 0 0 0 3px rgba(113, 136, 216, .12);
}

.demo-notice {
    border: 1px solid var(--saya-border);
    border-radius: var(--saya-radius-sm);
}

.topbar {
    border-bottom-color: var(--saya-border);
}

.brand-symbol, .auth-logo {
    background: var(--saya-primary);
}