:root {

/* ================= ACTIVE SEMANTIC COLORS ================= */

--color-foreground-primary: var(--color-light-foreground-primary);
--color-foreground-secondary: var(--color-light-foreground-secondary);
--color-foreground-tertiary: var(--color-light-foreground-tertiary);
--color-foreground-inverse: var(--color-light-foreground-inverse);
--color-background-page: var(--color-light-background-page);
--color-background-home: var(--color-light-background-home);
--color-surface-default: var(--color-light-surface-default);
--color-surface-muted: var(--color-light-surface-muted);
--color-border-default: var(--color-light-divider);
--color-border-strong: var(--color-light-border-default);
--color-brand-primary: var(--color-light-brand-primary);
--color-brand-primary-hover: var(--color-dark-brand-primary-80);
--color-brand-primary-tone-80: var(--color-light-brand-primary-80);
--color-brand-primary-soft: var(--color-light-brand-primary-5);
--color-brand-primary-disabled: var(--color-light-brand-primary-50);
--color-success-primary: var(--color-light-success-primary);
--color-success-surface: var(--color-light-success-primary-5);
--color-success-border: var(--color-light-success-primary-50);
--color-error-primary: var(--color-light-error-primary);
--color-error-surface: var(--color-light-error-primary-5);
--color-error-border: var(--color-light-error-primary-50);
--color-warning-primary: var(--color-light-warning-primary);
--color-warning-surface: var(--color-light-warning-primary-5);
--color-warning-surface-muted: var(--color-light-warning-alpha-5);
--color-info-primary: var(--color-light-info-primary);
--color-info-surface: var(--color-light-info-primary-5);
--color-shadow-neutral: var(--color-light-shadow-neutral);


/* ================= LEGACY THEME ALIASES ================= */

--text-primary: var(--color-foreground-primary);
--text-secondary: var(--color-foreground-secondary);
--text-muted: var(--color-foreground-tertiary);
--text-muted-lite: var(--color-foreground-secondary);
--text-metadata: var(--color-foreground-secondary);
--text-tab-primary: var(--color-foreground-inverse);
--text-tab-secondary: var(--color-foreground-secondary);

--bg-page: var(--color-background-page);
--bg-home: var(--color-background-home);
--bg-surface: var(--color-surface-default);
--bg-muted: var(--color-foreground-tertiary);
--bg-muted-lite: var(--color-surface-muted);
--bg-tab-primary: var(--color-foreground-primary);
--bg-tab-secondary: var(--color-border-strong);

--Primary-Brand-primary: var(--color-brand-primary);

--border-default: var(--color-border-default);

--button-primary-bg: var(--color-brand-primary);
--button-primary-hover: var(--color-brand-primary-hover);
--button-primary-text: var(--color-foreground-inverse);

--button-secondary-bg: transparent;
--button-secondary-hover: var(--color-brand-primary-soft);
--button-secondary-text: var(--color-brand-primary);

--button-primary-disabled-bg: var(--color-brand-primary-disabled);
--button-primary-disabled-hover: var(--color-brand-primary-hover);
--button-primary-disabled-text: var(--color-foreground-inverse);

--button-success-bg: var(--bg-success-soft);
--button-success-hover: var(--color-success-surface);
--button-success-text: var(--success-text);
--button-success-hover-text: var(--success-bg-text);
--button-success-border: var(--neutral-grey-border);
--button-success-hover-border: var(--success-bg);

--button-error-bg: var(--bg-error-soft);
--button-error-hover: var(--color-error-surface);
--button-error-text: var(--error-bg-text);
--button-error-hover-text: var(--error-text);
--button-error-border: var(--neutral-grey-border);
--button-error-hover-border: var(--error-bg);

--success-bg: var(--color-success-primary);
--success-bg-text: var(--color-foreground-inverse);
--success-text: var(--color-success-primary);

--error-bg: var(--color-error-primary);
--error-text: var(--color-foreground-inverse);
--error-bg-text: var(--color-error-primary);
--bg-success-soft: var(--color-success-surface);
--bg-error-soft: var(--color-error-surface);

--warning-bg: var(--color-warning-primary);
--bg-warning-muted: var(--color-warning-surface-muted);
--warning-text: var(--color-foreground-inverse);

--info-bg: var(--color-info-surface);
--info-text: var(--color-info-primary);

--shadow-color-neutral: var(--color-shadow-neutral);

--neutral-dark-border: var(--token-light-neutral-dark-border);
--neutral-grey-border: var(--color-border-strong);
--neutral-muted-border: var(--color-surface-muted);
--border-error-soft: var(--color-error-border);
--border-success-soft: var(--color-success-border);


/* ================= LEGACY CUSTOM-CSS PALETTE ================= */

--cp-legacy-brand-primary: var(--color-brand-primary);
--cp-legacy-brand-bright: color-mix(in srgb, var(--color-brand-primary) 82%, var(--color-foreground-inverse) 18%);
--cp-legacy-brand-bright-alpha-05: color-mix(in srgb, transparent 95%, var(--cp-legacy-brand-bright) 5%);
--cp-legacy-brand-border-30: color-mix(in srgb, transparent 70%, var(--color-brand-primary) 30%);
--cp-legacy-brand-border-50: color-mix(in srgb, transparent 50%, var(--color-brand-primary) 50%);
--cp-legacy-brand-alpha-05: color-mix(in srgb, transparent 95%, var(--color-brand-primary) 5%);
--cp-legacy-brand-alpha-08: color-mix(in srgb, transparent 92%, var(--color-brand-primary) 8%);
--cp-legacy-brand-alpha-10: color-mix(in srgb, transparent 90%, var(--color-brand-primary) 10%);
--cp-legacy-brand-alpha-18: color-mix(in srgb, transparent 82%, var(--color-brand-primary) 18%);
--cp-legacy-brand-alpha-26: color-mix(in srgb, transparent 74%, var(--color-brand-primary) 26%);
--cp-legacy-brand-alpha-28: color-mix(in srgb, transparent 72%, var(--color-brand-primary) 28%);
--cp-legacy-brand-alpha-30: color-mix(in srgb, transparent 70%, var(--color-brand-primary) 30%);
--cp-legacy-brand-alpha-50: color-mix(in srgb, transparent 50%, var(--color-brand-primary) 50%);
--cp-legacy-brand-alpha-80: color-mix(in srgb, transparent 20%, var(--color-brand-primary) 80%);

--cp-legacy-text-strong: var(--text-primary);
--cp-legacy-text-secondary: var(--text-secondary);
--cp-legacy-text-muted: color-mix(in srgb, transparent 30%, var(--text-primary) 70%);
--cp-legacy-text-soft: color-mix(in srgb, transparent 50%, var(--text-primary) 50%);
--cp-legacy-text-subtle: color-mix(in srgb, transparent 60%, var(--text-primary) 40%);
--cp-legacy-text-alpha-05: color-mix(in srgb, transparent 95%, var(--text-primary) 5%);
--cp-legacy-text-alpha-08: color-mix(in srgb, transparent 92%, var(--text-primary) 8%);
--cp-legacy-text-alpha-10: color-mix(in srgb, transparent 90%, var(--text-primary) 10%);
--cp-legacy-text-alpha-14: color-mix(in srgb, transparent 86%, var(--text-primary) 14%);
--cp-legacy-text-alpha-16: color-mix(in srgb, transparent 84%, var(--text-primary) 16%);
--cp-legacy-text-alpha-26: color-mix(in srgb, transparent 74%, var(--text-primary) 26%);
--cp-legacy-text-alpha-70: color-mix(in srgb, transparent 30%, var(--text-primary) 70%);
--cp-legacy-text-alpha-80: color-mix(in srgb, transparent 20%, var(--text-primary) 80%);
--cp-legacy-text-alpha-92: color-mix(in srgb, transparent 8%, var(--text-primary) 92%);

--cp-legacy-surface-base: var(--bg-surface);
--cp-legacy-surface-page: var(--bg-page);
--cp-legacy-surface-soft: color-mix(in srgb, var(--bg-page) 72%, var(--bg-surface) 28%);
--cp-legacy-surface-subtle: color-mix(in srgb, var(--bg-page) 46%, var(--bg-surface) 54%);
--cp-legacy-surface-elevated: color-mix(in srgb, var(--bg-surface) 85%, var(--bg-page) 15%);
--cp-legacy-surface-alpha-10: color-mix(in srgb, transparent 90%, var(--bg-page) 10%);
--cp-legacy-surface-alpha-50: color-mix(in srgb, transparent 50%, var(--bg-page) 50%);
--cp-legacy-surface-alpha-60: color-mix(in srgb, transparent 40%, var(--bg-page) 60%);
--cp-legacy-surface-alpha-80: color-mix(in srgb, transparent 20%, var(--bg-page) 80%);
--cp-legacy-border-default: var(--border-default);
--cp-legacy-border-strong: var(--neutral-grey-border);
--cp-legacy-border-soft: color-mix(in srgb, transparent 50%, var(--neutral-grey-border) 50%);
--cp-legacy-skeleton-start: color-mix(in srgb, var(--bg-page) 78%, var(--bg-surface) 22%);
--cp-legacy-skeleton-end: color-mix(in srgb, var(--bg-page) 62%, var(--bg-surface) 38%);

--cp-legacy-error: var(--error-bg);
--cp-legacy-error-strong: color-mix(in srgb, var(--error-bg) 84%, var(--text-primary) 16%);
--cp-legacy-error-soft: var(--bg-error-soft);
--cp-legacy-error-border-30: color-mix(in srgb, transparent 70%, var(--error-bg) 30%);
--cp-legacy-error-alpha-10: color-mix(in srgb, transparent 90%, var(--error-bg) 10%);

--cp-legacy-success: var(--success-bg);
--cp-legacy-success-strong: color-mix(in srgb, var(--success-bg) 86%, var(--text-primary) 14%);
--cp-legacy-success-soft: var(--bg-success-soft);
--cp-legacy-success-alpha-10: color-mix(in srgb, transparent 90%, var(--success-bg) 10%);
--cp-legacy-success-strong-alpha-10: color-mix(in srgb, transparent 90%, var(--cp-legacy-success-strong) 10%);

--cp-legacy-warning: var(--warning-bg);
--cp-legacy-warning-soft: var(--bg-warning-muted);
--cp-legacy-orange: color-mix(in srgb, var(--warning-bg) 74%, var(--error-bg) 26%);
--cp-legacy-orange-soft: var(--token-light-backgrounds-background-wp-page);
--cp-legacy-orange-alpha-60: color-mix(in srgb, transparent 40%, var(--cp-legacy-orange) 60%);
--cp-legacy-info: var(--info-text);
--cp-legacy-info-surface: var(--info-bg);

--cp-legacy-shadow-04: color-mix(in srgb, transparent 96%, var(--shadow-color-neutral) 4%);
--cp-legacy-shadow-05: color-mix(in srgb, transparent 95%, var(--shadow-color-neutral) 5%);
--cp-legacy-shadow-10: color-mix(in srgb, transparent 90%, var(--shadow-color-neutral) 10%);
--cp-legacy-shadow-30: color-mix(in srgb, transparent 70%, var(--shadow-color-neutral) 30%);
--cp-legacy-shadow-40: color-mix(in srgb, transparent 60%, var(--shadow-color-neutral) 40%);
--cp-legacy-shadow-60: color-mix(in srgb, transparent 40%, var(--shadow-color-neutral) 60%);

--cp-legacy-brand-ink-1: #010136;
--cp-legacy-brand-ink-1-alpha-40: color-mix(in srgb, transparent 60%, var(--cp-legacy-brand-ink-1) 40%);
--cp-legacy-brand-ink-2: color-mix(in srgb, var(--primary-900) 86%, var(--color-brand-primary) 14%);
--cp-legacy-brand-ink-3: color-mix(in srgb, var(--primary-900) 76%, var(--color-brand-primary) 24%);
--cp-legacy-brand-ink-4: color-mix(in srgb, var(--primary-900) 64%, var(--color-brand-primary) 36%);
--cp-legacy-brand-ink-5: color-mix(in srgb, var(--primary-900) 52%, var(--color-brand-primary) 48%);
--cp-legacy-brand-ink-6: color-mix(in srgb, var(--primary-900) 38%, var(--color-brand-primary) 62%);
}