/*
 * Brand design tokens + współdzielone prymitywy wizualne stron klienta.
 * Spójne z index.css (paleta sky #0ea5e9 + amber #fbbf24, glass/rounded look).
 * Używane na: login, change-password, reservation_view.
 */
:root {
    --brand: #0ea5e9;
    --brand-dark: #075985;
    --brand-soft: #e0f2fe;
    --accent: #f59e0b;
    --accent-light: #fbbf24;
    --radius-card: 32px;
}

/* Subtelne, markowe tło stron klienta (zamiast płaskiego slate/gray) */
body.brand-bg {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 42%, #e0f2fe 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Spójna karta: białe tło, miękki sky-cień, duży promień jak w index */
.brand-card {
    background: #ffffff;
    border: 1px solid var(--brand-soft);
    border-radius: var(--radius-card);
    box-shadow: 0 25px 50px -12px rgba(14, 165, 233, 0.18);
}

/* Pasek/nagłówek w kolorze marki (gradient sky) */
.brand-header {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

/* Główny przycisk akcji w kolorze marki (sky); amber zostaje dla CTA konwersji na index */
.btn-brand {
    background: var(--brand);
    border-radius: 1rem;
    transition: all 0.3s ease;
}
.btn-brand:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -6px rgba(14, 165, 233, 0.45);
}
.btn-brand:active {
    transform: scale(0.98);
}