:root {
    --kc-brand-purple-deep: #473689;
    --kc-brand-purple: #5132bf;
    --kc-brand-violet: #7454e1;
    --kc-brand-magenta: #a701fa;
    --kc-brand-cyan: #74c4e6;
    --kc-brand-mint: #13d8aa;
    --kc-bg-canvas: #120d16;
    --kc-bg-deep: #0d0910;
    --kc-bg-surface: #1b1320;
    --kc-bg-elevated: #24192b;
    --kc-text-primary: #f8f7fb;
    --kc-text-secondary: #b9afc1;
    --kc-text-muted: #8f8497;
    --kc-border-default: rgba(255,255,255,.10);
    --kc-border-strong: rgba(255,255,255,.18);
    --kc-radius-sm: 12px;
    --kc-radius-md: 16px;
    --kc-radius-lg: 26px;
    --kc-radius-xl: 36px;
    --kc-shadow-sm: 0 12px 35px rgba(0,0,0,.22);
    --kc-shadow-lg: 0 28px 80px rgba(0,0,0,.32);
    --kc-space-1: 4px;
    --kc-space-2: 8px;
    --kc-space-3: 12px;
    --kc-space-4: 16px;
    --kc-space-5: 24px;
    --kc-space-6: 32px;
    --kc-space-7: 48px;
    --kc-space-8: 64px;
    --kc-space-9: 96px;
    --kc-ease: cubic-bezier(.2,.8,.2,1);

    /* Semantic aliases: components should prefer these over raw brand values. */
    --kc-color-brand-primary: var(--kc-brand-violet);
    --kc-color-brand-secondary: var(--kc-brand-cyan);
    --kc-color-bg-canvas: var(--kc-bg-canvas);
    --kc-color-bg-surface: var(--kc-bg-surface);
    --kc-color-bg-elevated: var(--kc-bg-elevated);
    --kc-color-text-primary: var(--kc-text-primary);
    --kc-color-text-secondary: var(--kc-text-secondary);
    --kc-color-border-default: var(--kc-border-default);
    --kc-color-border-highlight: rgba(116,196,230,.42);
    --kc-color-action-primary: var(--kc-brand-violet);
    --kc-color-action-accent: var(--kc-brand-cyan);
}