html.dark-skin {

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

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


/* ================= DARK CUSTOM-CSS COMPATIBILITY ================= */

--cp-dark-text-primary: var(--color-foreground-primary);
--cp-dark-text-secondary: var(--color-foreground-secondary);
--cp-dark-text-muted: var(--color-dark-foreground-inverse-muted);
--cp-dark-text-on-brand: var(--color-foreground-inverse);
--cp-dark-text-brand: var(--color-brand-primary);
--cp-dark-text-brand-foreground: var(--color-brand-foreground);
--cp-dark-text-warm: color-mix(in srgb, var(--color-foreground-primary) 92%, var(--color-warning-primary) 8%);
--cp-dark-text-warning: color-mix(in srgb, var(--color-warning-primary) 68%, var(--color-error-primary) 32%);
--cp-dark-text-warning-muted: color-mix(in srgb, var(--color-warning-primary) 55%, var(--color-foreground-primary) 45%);

--cp-dark-fill-soft: var(--color-dark-surface-inverse-secondary);
--cp-dark-fill-soft-08: color-mix(in srgb, transparent 92%, var(--color-foreground-primary) 8%);
--cp-dark-fill-soft-10: color-mix(in srgb, transparent 90%, var(--color-foreground-primary) 10%);
--cp-dark-fill-soft-15: color-mix(in srgb, transparent 85%, var(--color-foreground-primary) 15%);
--cp-dark-fill-soft-16: color-mix(in srgb, transparent 84%, var(--color-foreground-primary) 16%);

--cp-dark-border-soft: var(--cp-dark-fill-soft-15);
--cp-dark-border-medium: color-mix(in srgb, transparent 70%, var(--color-foreground-primary) 30%);
--cp-dark-border-strong: color-mix(in srgb, transparent 50%, var(--color-foreground-primary) 50%);

--cp-dark-surface-panel: color-mix(in srgb, var(--color-surface-default) 76%, var(--color-foreground-primary) 24%);
--cp-dark-surface-panel-alt: color-mix(in srgb, var(--color-surface-default) 88%, var(--color-surface-muted) 12%);
--cp-dark-surface-panel-strong: color-mix(in srgb, var(--color-surface-muted) 58%, var(--color-foreground-primary) 42%);
--cp-dark-surface-overlay: color-mix(in srgb, transparent 50%, var(--color-background-page) 50%);
--cp-dark-surface-brand-panel: color-mix(in srgb, var(--color-background-page) 76%, var(--color-brand-primary) 24%);
--cp-dark-surface-brand-panel-strong: color-mix(in srgb, var(--color-background-page) 62%, var(--color-brand-primary) 38%);
--cp-dark-surface-brand-tint: var(--color-brand-primary-alpha-10);
--cp-dark-surface-brand-tint-strong: var(--color-brand-primary-alpha-30);
--cp-dark-surface-brand-tint-50: color-mix(in srgb, transparent 50%, var(--color-brand-primary) 50%);
--cp-dark-surface-success-tint: color-mix(in srgb, transparent 90%, var(--color-success-primary) 10%);
--cp-dark-surface-success-tint-soft: color-mix(in srgb, transparent 85%, var(--color-success-primary) 15%);
--cp-dark-surface-success-tint-20: color-mix(in srgb, transparent 80%, var(--color-success-primary) 20%);
--cp-dark-surface-success-tint-strong: color-mix(in srgb, transparent 70%, var(--color-success-primary) 30%);
--cp-dark-surface-warning-tint: color-mix(in srgb, transparent 80%, var(--color-warning-primary) 20%);
--cp-dark-surface-warning-tint-strong: color-mix(in srgb, transparent 70%, var(--color-warning-primary) 30%);
--cp-dark-surface-error-tint: color-mix(in srgb, transparent 80%, var(--color-error-primary) 20%);
--cp-dark-surface-info-tint: color-mix(in srgb, transparent 90%, var(--color-info-primary) 10%);

--cp-dark-accent-orange: color-mix(in srgb, var(--color-warning-primary) 70%, var(--color-error-primary) 30%);
--cp-dark-accent-magenta: color-mix(in srgb, var(--color-brand-primary) 62%, var(--color-error-primary) 38%);
--cp-dark-accent-purple: color-mix(in srgb, var(--color-brand-primary) 72%, var(--color-error-primary) 28%);
--cp-dark-surface-orange-tint: color-mix(in srgb, transparent 80%, var(--cp-dark-accent-orange) 20%);
--cp-dark-surface-magenta-tint: color-mix(in srgb, transparent 80%, var(--cp-dark-accent-magenta) 20%);
--cp-dark-border-magenta: color-mix(in srgb, transparent 70%, var(--cp-dark-accent-purple) 30%);

--cp-dark-gradient-base-20: color-mix(in srgb, transparent 80%, var(--color-surface-default) 20%);
--cp-dark-gradient-base-30: color-mix(in srgb, transparent 70%, var(--color-surface-default) 30%);
--cp-dark-backdrop: color-mix(in srgb, transparent 60%, var(--color-shadow-neutral) 40%);
--cp-dark-shadow-surface: color-mix(in srgb, transparent 70%, var(--color-background-page) 30%);
--cp-dark-shadow-brand: color-mix(in srgb, transparent 95%, var(--color-brand-primary) 5%);
--cp-dark-shadow-success: color-mix(in srgb, transparent 95%, var(--color-success-primary) 5%);
--cp-dark-shadow-modal: color-mix(in srgb, transparent 76%, var(--color-shadow-neutral) 24%);


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

--cp-legacy-brand-primary: var(--color-brand-primary);
--cp-legacy-brand-bright: color-mix(in srgb, var(--color-brand-primary) 88%, var(--color-foreground-inverse) 12%);
--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) 58%, var(--bg-surface) 42%);
--cp-legacy-surface-subtle: color-mix(in srgb, var(--bg-page) 34%, var(--bg-surface) 66%);
--cp-legacy-surface-elevated: color-mix(in srgb, var(--bg-surface) 82%, var(--bg-page) 18%);
--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) 82%, var(--bg-surface) 18%);
--cp-legacy-skeleton-end: color-mix(in srgb, var(--bg-page) 68%, var(--bg-surface) 32%);

--cp-legacy-error: var(--error-bg);
--cp-legacy-error-strong: color-mix(in srgb, var(--error-bg) 90%, var(--cp-dark-text-primary) 10%);
--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) 90%, var(--cp-dark-text-primary) 10%);
--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-dark-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(--color-background-page) 86%, var(--color-brand-primary) 14%);
--cp-legacy-brand-ink-3: color-mix(in srgb, var(--color-background-page) 76%, var(--color-brand-primary) 24%);
--cp-legacy-brand-ink-4: color-mix(in srgb, var(--color-background-page) 64%, var(--color-brand-primary) 36%);
--cp-legacy-brand-ink-5: color-mix(in srgb, var(--color-background-page) 52%, var(--color-brand-primary) 48%);
--cp-legacy-brand-ink-6: color-mix(in srgb, var(--color-background-page) 38%, var(--color-brand-primary) 62%);
}