/* ChampiDex visual brand layer
 * Visual only. No behavior or application logic.
 */

:root {
    --champidex-navy: #050b1b;
    --champidex-blue: #087cff;
    --champidex-blue-hot: #16b9ff;
    --champidex-panel: #0d172b;
    --champidex-panel-2: #111f38;
    --champidex-border: rgba(45, 146, 255, .24);
    --champidex-text: #f4f8ff;
    --champidex-muted: #aebbd0;
}

body {
    background:
        radial-gradient(circle at 50% -10%, rgba(0, 157, 255, .16), transparent 38%),
        var(--champidex-navy);
}

.site-header {
    background: rgba(5, 11, 27, .96);
    border-bottom-color: var(--champidex-border);
}

.site-header .brand img {
    width: min(360px, 68vw);
    height: auto;
    display: block;
}

.site-footer {
    background: var(--champidex-navy);
    border-top-color: var(--champidex-border);
}

a {
    color: var(--champidex-blue-hot);
}

button,
input,
select,
textarea {
    border-color: var(--champidex-border);
}

button {
    background: linear-gradient(135deg,
        var(--champidex-blue),
        var(--champidex-blue-hot));
}

.builder-page {
    background: transparent;
}

.builder-page .builder-intro,
.builder-page .builder-toolbar,
.builder-page .builder-slot-list,
.builder-page .builder-editor {
    --ink: var(--champidex-text);
}

.builder-page .builder-slot-list,
.builder-page .builder-editor {
    border-color: var(--champidex-border);
}

.builder-page .builder-save-row {
    color: var(--champidex-muted);
}