/* VoltaKap design system tokens: single light theme, square/hairline aesthetic. */
:root {
    /* Brand */
    --bg:          #f4f4f4; /* page canvas (Carbon gray-10) */
    --surface:     #ffffff; /* card / white canvas */
    --surface-2:   #e0e0e0; /* hover fill, disabled fill, hairline */
    --border:      #e0e0e0; /* hairline */
    --border-strong: #2b2930; /* charcoal, active/focus borders */
    --text:        #2b2930; /* ink */
    --text-muted:  #525252; /* secondary text */
    --text-tertiary: #8c8c8c; /* placeholders, disabled labels */
    --accent:      #ffed00; /* VoltaKap yellow */
    --accent-hv:   #e6d500; /* hover */
    --accent-active: #b3a600; /* press */
    --accent-text: #2b2930; /* text on yellow */

    /* Status */
    --success:      #24a148;
    --success-bg:   #defbe6;
    --success-text: #0e6027;
    --warning:      #f1c21b;
    --warning-bg:   #fcf4d6;
    --warning-text: #684e00;
    --error:        #da1e28;
    --error-bg:     #fff1f1;
    --error-text:   #a2191f;
    --info:         #0043ce;
    --info-bg:      #d0e2ff;
    --info-text:    #002d9c;

    /* Type */
    --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    /* Motion */
    --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
    --transition-interactive: background-color 110ms var(--ease-standard), border-color 110ms var(--ease-standard), color 110ms var(--ease-standard);

    /* Elevation: flat by default; shadows reserved for transient layers only */
    --elevation-overlay: 0 2px 6px rgba(0,0,0,.20);
    --elevation-modal: 0 4px 16px rgba(0,0,0,.24);
    --overlay-scrim: rgba(43,41,48,.55);
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.16px;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

::selection { background: #fff480; color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.16px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: var(--transition-interactive);
    white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary {
    background: var(--accent);
    color: var(--accent-text);
}

.btn--primary:hover { background: var(--accent-hv); color: var(--accent-text); text-decoration: none; }
.btn--primary:active { background: var(--accent-active); }

.btn--secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}

.btn--secondary:hover { background: var(--border-strong); color: #fff; text-decoration: none; }

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

.btn--danger {
    background: transparent;
    color: var(--error-text);
    border-color: var(--error);
}

.btn--danger:hover { background: var(--error); color: #fff; text-decoration: none; }

.btn--sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }

main { padding-top: 72px; min-height: calc(100vh - 72px); }

/* Flash messages */
.flash-messages {
    position: fixed;
    top: 84px;
    right: 1.25rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    pointer-events: none;
}

.flash {
    padding: 0.8rem 1.1rem;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 400;
    border: 1px solid transparent;
    pointer-events: auto;
    animation: flash-in 150ms var(--ease-standard);
}

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.flash--success {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success-text);
}

.flash--error,
.flash--danger {
    background: var(--error-bg);
    border-color: var(--error);
    color: var(--error-text);
}

.flash--warning {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning-text);
}

.flash--info {
    background: var(--info-bg);
    border-color: var(--info);
    color: var(--info-text);
}