/* public/css/brand.css
 * Pelinor brand tokens, lifted directly from pelinor.com's own stylesheet
 * (same --bg-dark / --text-main / --accent values), plus the button/nav
 * styles shared by the admin layout and the standalone login page.
 */

:root {
    --brand-dark:          #0E1013;
    --brand-surface:       #191D22; /* cards, sidebar rows, modals - one step up from the body */
    --brand-input-bg:      #21262D; /* form inputs - one step up again, so they read as "on top of" a surface */
    --brand-input-border:  rgba(255, 255, 255, 0.16);
    --brand-text:          #D8DCE0;
    --brand-text-muted:    #8B9098;
    --brand-accent:        oklch(0.80 0.16 180);
    --brand-accent-rgb:    111, 235, 199; /* approximate sRGB of the accent, for rgba() use */
    --brand-border:        rgba(255, 255, 255, 0.10);
}

.btn-brand {
    background: var(--brand-accent);
    color: #06110d !important;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    padding: 8px 24px;
    transition: opacity 0.2s, transform 0.2s;
}
.btn-brand:hover {
    opacity: 0.85;
    background-color: color-mix(in oklch, var(--brand-accent) 85%, white);
    border-color: color-mix(in oklch, var(--brand-accent) 85%, white);
    color: #FFF !important;
}

/* Overriding Bootstrap primary button globally */
.btn-primary {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #06110d;
}
.btn-primary:hover {
    background-color: color-mix(in oklch, var(--brand-accent) 85%, white);
    border-color: color-mix(in oklch, var(--brand-accent) 85%, white);
    color: #06110d;
}

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