:root {
    --lumix-bg: #0b1026;
    --lumix-panel: rgba(255, 255, 255, 0.08);
    --lumix-border: rgba(255, 255, 255, 0.14);
    --lumix-text: #ffffff;
    --lumix-muted: #cbd5e1;
    --lumix-blue: #38bdf8;
    --lumix-violet: #8b5cf6;
}

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.brand-focus:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--lumix-blue);
    outline-offset: 3px;
}

.brand-gradient-text {
    background: linear-gradient(135deg, var(--lumix-blue), var(--lumix-violet));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}