:root {
    /* Base palette */
    --color-blue-50: #eef3ff;
    --color-blue-100: #dce6ff;
    --color-blue-200: #b8ccff;
    --color-blue-400: #5f85f2;
    --color-blue-500: #2d60e9;
    --color-blue-600: #234ed0;
    --color-blue-700: #1d40aa;
    --color-lime-400: #dcff4f;
    --color-lime-500: #c9f12f;
    --color-neutral-0: #ffffff;
    --color-neutral-100: #f4f1fb;
    --color-neutral-300: #aaa3b9;
    --color-neutral-700: #342c44;
    --color-neutral-850: #191422;
    --color-neutral-900: #12101a;
    --color-neutral-950: #0e0a16;

    /* Semantic palette */
    --color-primary: var(--color-blue-500);
    --color-primary-hover: var(--color-blue-600);
    --color-primary-soft: rgba(45, 96, 233, .16);
    --color-primary-border: rgba(95, 133, 242, .62);
    --color-accent: var(--color-lime-400);
    --color-accent-hover: var(--color-lime-500);
    --color-on-primary: var(--color-neutral-0);
    --color-on-accent: #090d16;
    --color-text: var(--color-neutral-100);
    --color-text-muted: var(--color-neutral-300);
    --color-page: var(--color-neutral-950);
    --color-surface: var(--color-neutral-850);
    --color-surface-soft: #171321;
    --color-border: var(--color-neutral-700);
    --focus-ring: rgba(95, 133, 242, .48);

    /* Compatibility aliases used by the existing component library */
    --brand: var(--color-primary);
    --brand-dark: var(--color-primary-hover);
    --brand-soft: var(--color-primary-soft);
    --accent: var(--color-accent);
    --ink: var(--color-text);
    --muted: var(--color-text-muted);
    --surface-soft: var(--color-surface-soft);
    --line: var(--color-border);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline-color: var(--focus-ring) !important;
}

.button-primary {
    color: var(--color-on-primary) !important;
    background: var(--color-primary) !important;
    box-shadow: 0 8px 24px rgba(45, 96, 233, .28) !important;
}

.button-primary:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: 0 12px 30px rgba(45, 96, 233, .38) !important;
}

.button-secondary {
    color: var(--color-blue-200) !important;
    background: var(--color-surface-soft) !important;
    border-color: var(--color-primary-border) !important;
}

.button-light,
.pipeline-footer button,
.featured-label {
    color: var(--color-on-accent) !important;
    background: var(--color-accent) !important;
}

.button-light:hover,
.pipeline-footer button:hover {
    background: var(--color-accent-hover) !important;
}

.hero {
    background:
        radial-gradient(circle at 78% 30%, rgba(45, 96, 233, .22), transparent 35%),
        linear-gradient(180deg, var(--color-page) 0%, #0d1324 68%, var(--color-page) 100%) !important;
}

.visual-glow {
    background: radial-gradient(circle, rgba(45, 96, 233, .34), rgba(45, 96, 233, .06) 48%, transparent 70%) !important;
}

.hero-orb.two {
    background: rgba(45, 96, 233, .09) !important;
}

.brand-symbol {
    box-shadow: 0 0 0 1px rgba(45, 96, 233, .3), 0 6px 18px rgba(0, 0, 0, .25) !important;
}

.dashboard-card {
    box-shadow: 0 40px 100px rgba(0, 0, 0, .46), 0 0 0 1px rgba(45, 96, 233, .14) !important;
}

.automation > span,
.flow-node > span,
.mega-icon,
.capability-icon,
.module-icon,
.journey-steps article > span {
    color: var(--color-primary) !important;
    background: var(--color-primary-soft) !important;
}

.automation-visual::before {
    background: linear-gradient(135deg, var(--color-blue-600), var(--color-blue-400)) !important;
}

.eyebrow.light {
    color: var(--color-blue-200) !important;
}

.pipeline-step.active {
    border-color: var(--color-primary-border) !important;
}

.about-card {
    background: linear-gradient(135deg, #111a31, #16295d 60%, #173f9f) !important;
    border-color: rgba(95, 133, 242, .45) !important;
}

.module-card.featured,
.module-select-card.is-selected {
    border-color: var(--color-primary) !important;
}