/**
 * Design System Compatibility Layer v2.0
 * =========================================
 * Maps all legacy CSS variable names to new --ds-* design tokens.
 * This file ensures backward compatibility during migration.
 *
 * Generated: 2026-09-12
 * DO NOT DELETE - referenced by base.html and admin/base.html
 */

:root {
    /* === Color mappings (old -> new) === */

    /* Primary */
    --primary-color: var(--ds-primary-500);
    --primary: var(--ds-primary-500);
    --primary-light: var(--ds-primary-100);
    --primary-lighter: var(--ds-primary-50);
    --primary-dark: var(--ds-primary-700);
    --primary-darker: var(--ds-primary-900);
    --color-primary: var(--ds-primary-500);

    /* Secondary / Accent */
    --secondary-color: var(--ds-accent-500);
    --secondary: var(--ds-accent-500);
    --accent-color: var(--ds-accent-500);

    /* Success */
    --success-color: var(--ds-success-500);
    --success: var(--ds-success-500);
    --color-success: var(--ds-success-500);

    /* Warning */
    --warning-color: var(--ds-warning-500);
    --warning: var(--ds-warning-500);
    --color-warning: var(--ds-warning-500);

    /* Danger */
    --danger-color: var(--ds-danger-500);
    --danger: var(--ds-danger-500);
    --color-danger: var(--ds-danger-500);

    /* Info */
    --info-color: var(--ds-info-500);
    --info: var(--ds-info-500);
    --color-info: var(--ds-info-500);

    /* Highlight */
    --highlight-color: var(--ds-highlight-500);
    --highlight: var(--ds-highlight-500);

    /* Neutral / Gray */
    --gray-color: var(--ds-neutral-500);
    --gray: var(--ds-neutral-500);
    --light-gray: var(--ds-neutral-300);
    --dark-gray: var(--ds-neutral-700);
    --text-color: var(--ds-neutral-700);
    --text-muted: var(--ds-neutral-400);
    --text-light: var(--ds-neutral-300);
    --text-secondary: var(--ds-neutral-500);
    --heading-color: var(--ds-neutral-900);

    /* Background */
    --bg-color: var(--ds-neutral-50);
    --bg: var(--ds-neutral-50);
    --background-color: var(--ds-neutral-50);
    --body-bg: var(--ds-neutral-50);

    /* Card */
    --card-bg: var(--ds-neutral-0);
    --card-background: var(--ds-neutral-0);

    /* Navbar */
    --navbar-bg: var(--ds-neutral-0);

    /* Border */
    --border-color: var(--ds-neutral-200);
    --border-light: var(--ds-neutral-100);
    --input-border: var(--ds-neutral-300);

    /* === Lianchuangquan (lc-) variables === */
    --lc-primary: var(--ds-primary-500);
    --lc-primary-light: var(--ds-primary-100);
    --lc-primary-lighter: var(--ds-primary-50);
    --lc-primary-dark: var(--ds-primary-700);
    --lc-primary-darker: var(--ds-primary-900);
    --lc-secondary: var(--ds-accent-500);
    --lc-amber: var(--ds-warning-500);
    --lc-amber-light: var(--ds-warning-100);
    --lc-green: var(--ds-success-500);
    --lc-green-light: var(--ds-success-100);
    --lc-pink: var(--ds-highlight-500);
    --lc-red: var(--ds-danger-500);
    --lc-purple: var(--ds-accent-500);
    --lc-bg: var(--ds-neutral-50);
    --lc-card-bg: var(--ds-neutral-0);
    --lc-text: var(--ds-neutral-700);
    --lc-text-muted: var(--ds-neutral-400);
    --lc-border: var(--ds-neutral-200);

    /* === Mobile (m-) variables === */
    --m-primary: var(--ds-primary-500);
    --m-primary-light: var(--ds-primary-300);
    --m-secondary: var(--ds-accent-500);
    --m-success: var(--ds-success-500);
    --m-warning: var(--ds-warning-500);
    --m-danger: var(--ds-danger-500);
    --m-text: var(--ds-neutral-700);
    --m-text-secondary: var(--ds-neutral-500);
    --m-bg: var(--ds-neutral-50);
    --m-card-bg: var(--ds-neutral-0);
    --m-border: var(--ds-neutral-200);
    --m-card-radius: var(--ds-radius-lg);
    --m-gap-sm: var(--ds-space-sm);
    --m-gap-md: var(--ds-space-md);
    --m-gap-lg: var(--ds-space-lg);
    --m-touch-min: 44px;
    --m-topbar-height: 52px;
    --m-tab-height: 56px;

    /* === Admin (am-) variables === */
    --am-primary: var(--ds-primary-500);
    --am-success: var(--ds-success-500);
    --am-warning: var(--ds-warning-500);
    --am-danger: var(--ds-danger-500);
    --am-bg: var(--ds-neutral-50);
    --am-card-bg: var(--ds-neutral-0);
    --am-border: var(--ds-neutral-200);
    --am-text: var(--ds-neutral-700);

    /* === Matrix (m-) admin variables === */
    /* (already covered by m- variables above) */

    /* === Legacy font/spacing aliases === */
    --font-size-xs: var(--ds-text-xs);
    --font-size-sm: var(--ds-text-sm);
    --font-size-base: var(--ds-text-base);
    --font-size-lg: var(--ds-text-lg);
    --font-size-xl: var(--ds-text-xl);
    --font-size-2xl: var(--ds-text-2xl);
    --font-normal: var(--ds-font-regular);
    --font-medium: var(--ds-font-medium);
    --font-semibold: var(--ds-font-semibold);
    --font-bold: var(--ds-font-bold);
    --leading-tight: var(--ds-line-height-tight);
    --leading-normal: var(--ds-line-height-normal);
    --leading-relaxed: var(--ds-line-height-relaxed);
    --radius-sm: var(--ds-radius-sm);
    --radius-md: var(--ds-radius-md);
    --radius-lg: var(--ds-radius-lg);
    --shadow-sm: var(--ds-shadow-sm);
    --shadow-md: var(--ds-shadow-md);
    --shadow-lg: var(--ds-shadow-lg);


    /* === Additional legacy variable mappings (2026-09-12) === */

    /* ACE editor / code component */
    --ace-accent: var(--ds-accent-500);
    --ace-bg: var(--ds-neutral-900);
    --ace-green: var(--ds-success-500);
    --ace-ink: var(--ds-neutral-100);
    --ace-muted: var(--ds-neutral-500);
    --ace-red: var(--ds-danger-500);
    --ace-rule: var(--ds-neutral-700);

    /* Admin mobile additional */
    --am-radius: var(--ds-radius-md);
    --am-safe-bottom: env(safe-area-inset-bottom, 0px);
    --am-safe-top: env(safe-area-inset-top, 0px);
    --am-topbar-h: 52px;
    --am-touch: 44px;

    /* Badge */
    --badge-bg: var(--ds-primary-100);
    --badge-color: var(--ds-primary-700);

    /* Color system extended */
    --color-amber: var(--ds-warning-500);
    --color-bg-card: var(--ds-neutral-0);
    --color-bg-page: var(--ds-neutral-50);
    --color-bg-secondary: var(--ds-neutral-100);
    --color-border: var(--ds-neutral-200);
    --color-green: var(--ds-success-500);
    --color-pink: var(--ds-highlight-500);
    --color-primary-dark: var(--ds-primary-700);
    --color-primary-light: var(--ds-primary-100);
    --color-purple: var(--ds-accent-500);
    --color-surface: var(--ds-neutral-0);
    --color-text-muted: var(--ds-neutral-400);
    --color-text-primary: var(--ds-neutral-700);
    --color-text-secondary: var(--ds-neutral-500);

    /* Dark color */
    --dark-color: var(--ds-neutral-900);

    /* Health indicator */
    --health: var(--ds-success-500);

    /* LC additional */
    --lc-bg-card: var(--ds-neutral-0);
    --lc-bg-secondary: var(--ds-neutral-100);
    --lc-bg-surface: var(--ds-neutral-0);

    /* LVP (unknown - default to primary) */
    --lvp: var(--ds-primary-500);

    /* Mobile additional */
    --m-gap-xs: var(--ds-space-xs);
    --m-tab-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-tabbar-bg: var(--ds-neutral-0);
    --m-topbar-bg: var(--ds-neutral-0);

    /* Marketing */
    --mkt-nav-hover: var(--ds-primary-50);

    /* Module */
    --module-color: var(--ds-primary-500);

    /* Page editor / Persona editor */
    --pe-accent: var(--ds-accent-500);
    --pe-amber: var(--ds-warning-500);
    --pe-bg: var(--ds-neutral-50);
    --pe-cyan: var(--ds-info-500);
    --pe-green: var(--ds-success-500);
    --pe-ink: var(--ds-neutral-900);
    --pe-muted: var(--ds-neutral-400);
    --pe-orange: #ea580c;
    --pe-pink: var(--ds-highlight-500);
    --pe-red: var(--ds-danger-500);
    --pe-rule: var(--ds-neutral-200);

    /* Generic aliases */
    --radius: var(--ds-radius-md);
    --shadow: var(--ds-shadow-md);
    --space-lg: var(--ds-space-lg);
    --space-md: var(--ds-space-md);
    --space-sm: var(--ds-space-sm);
    --space-xs: var(--ds-space-xs);
    --transition: all 0.2s ease;

    /* Writing module */
    --wm-card-color: var(--ds-neutral-700);
    --wm-card-color-light: var(--ds-neutral-500);
    --wm-card-color-lighter: var(--ds-neutral-300);



    /* === Additional variant mappings === */

    /* ACE variants */
    --ace-accent2: var(--ds-accent-300);
    --ace-accent3: var(--ds-accent-100);
    --ace-bg2: var(--ds-neutral-800);
    --ace-bg3: var(--ds-neutral-700);

    /* PE variants */
    --pe-accent2: var(--ds-accent-300);
    --pe-accent3: var(--ds-accent-100);
    --pe-bg2: var(--ds-neutral-100);
    --pe-bg3: var(--ds-neutral-200);

    /* LC additional */
    --lc-bg-hover: var(--ds-neutral-100);
    --lc-bg-page: var(--ds-neutral-50);
    --lc-border-light: var(--ds-neutral-100);
    --lc-cyan: var(--ds-info-500);
    --lc-purple-light: var(--ds-accent-100);
    --lc-green-light: var(--ds-success-100);
    --lc-amber-light: var(--ds-warning-100);
    --lc-pink-light: var(--ds-highlight-100);
    --lc-red-light: var(--ds-danger-100);
    --lc-font-normal: var(--ds-font-regular);
    --lc-font-medium: var(--ds-font-medium);
    --lc-font-semibold: var(--ds-font-semibold);
    --lc-font-bold: var(--ds-font-bold);
    --lc-font-extrabold: 800;
    --lc-leading-tight: var(--ds-line-height-tight);
    --lc-leading-normal: var(--ds-line-height-normal);
    --lc-radius-xs: var(--ds-radius-xs);
    --lc-radius-sm: var(--ds-radius-sm);
    --lc-radius-md: var(--ds-radius-md);
    --lc-radius-lg: var(--ds-radius-lg);
    --lc-radius-full: var(--ds-radius-full);
    --lc-shadow-xs: var(--ds-shadow-xs);
    --lc-shadow-sm: var(--ds-shadow-sm);
    --lc-shadow-md: var(--ds-shadow-md);
    --lc-shadow-lg: var(--ds-shadow-lg);
    --lc-space-xs: var(--ds-space-xs);
    --lc-space-sm: var(--ds-space-sm);
    --lc-space-md: var(--ds-space-md);
    --lc-space-lg: var(--ds-space-lg);
    --lc-text-xs: var(--ds-text-xs);
    --lc-text-sm: var(--ds-text-sm);
    --lc-text-base: var(--ds-text-base);
    --lc-text-lg: var(--ds-text-lg);
    --lc-text-xl: var(--ds-text-xl);
    --lc-text-primary: var(--ds-text-primary);
    --lc-text-secondary: var(--ds-text-secondary);
    --lc-text-muted: var(--ds-text-muted);
    --lc-transition-fast: all 0.15s ease;
    --lc-z-overlay: 1000;
    --lc-z-toast: 9999;
    --lc-text-: var(--ds-text-base);

}

/* === Dark theme compatibility === */
[data-theme="dark"] {
    --primary-color: var(--ds-primary-500);
    --secondary-color: var(--ds-accent-500);
    --success-color: var(--ds-success-500);
    --warning-color: var(--ds-warning-500);
    --danger-color: var(--ds-danger-500);
    --info-color: var(--ds-info-500);
    --bg-color: var(--ds-neutral-900);
    --bg: var(--ds-neutral-900);
    --background-color: var(--ds-neutral-900);
    --body-bg: var(--ds-neutral-900);
    --card-bg: var(--ds-neutral-800);
    --card-background: var(--ds-neutral-800);
    --navbar-bg: var(--ds-neutral-900);
    --border-color: var(--ds-neutral-700);
    --border-light: var(--ds-neutral-800);
    --input-border: var(--ds-neutral-600);
    --text-color: var(--ds-neutral-50);
    --text-muted: var(--ds-neutral-400);
    --text-light: var(--ds-neutral-500);
    --text-secondary: var(--ds-neutral-300);
    --heading-color: var(--ds-neutral-50);
    --gray-color: var(--ds-neutral-400);
    --light-gray: var(--ds-neutral-600);
    --dark-gray: var(--ds-neutral-300);

    --m-primary: var(--ds-primary-500);
    --m-text: var(--ds-neutral-50);
    --m-text-secondary: var(--ds-neutral-400);
    --m-bg: var(--ds-neutral-900);
    --m-card-bg: var(--ds-neutral-800);
    --m-border: var(--ds-neutral-700);

    --lc-bg: var(--ds-neutral-900);
    --lc-card-bg: var(--ds-neutral-800);
    --lc-text: var(--ds-neutral-50);
    --lc-text-muted: var(--ds-neutral-400);
    --lc-border: var(--ds-neutral-700);

    --am-bg: var(--ds-neutral-900);
    --am-card-bg: var(--ds-neutral-800);
    --am-text: var(--ds-neutral-50);
    --am-border: var(--ds-neutral-700);


    /* Dark theme additional */
    --ace-bg: var(--ds-neutral-900);
    --ace-ink: var(--ds-neutral-100);
    --ace-muted: var(--ds-neutral-500);
    --ace-rule: var(--ds-neutral-700);

    --badge-bg: var(--ds-primary-900);
    --badge-color: var(--ds-primary-200);

    --color-bg-card: var(--ds-neutral-800);
    --color-bg-page: var(--ds-neutral-900);
    --color-bg-secondary: var(--ds-neutral-800);
    --color-border: var(--ds-neutral-700);
    --color-surface: var(--ds-neutral-800);
    --color-text-muted: var(--ds-neutral-400);
    --color-text-primary: var(--ds-neutral-50);
    --color-text-secondary: var(--ds-neutral-300);

    --dark-color: var(--ds-neutral-50);

    --lc-bg-card: var(--ds-neutral-800);
    --lc-bg-secondary: var(--ds-neutral-700);
    --lc-bg-surface: var(--ds-neutral-800);

    --m-tabbar-bg: var(--ds-neutral-900);
    --m-topbar-bg: var(--ds-neutral-900);

    --mkt-nav-hover: var(--ds-neutral-800);

    --pe-bg: var(--ds-neutral-900);
    --pe-ink: var(--ds-neutral-50);
    --pe-muted: var(--ds-neutral-400);
    --pe-rule: var(--ds-neutral-700);

    --wm-card-color: var(--ds-neutral-50);
    --wm-card-color-light: var(--ds-neutral-300);
    --wm-card-color-lighter: var(--ds-neutral-500);



    /* Dark theme additional variants */
    --ace-accent2: var(--ds-accent-300);
    --ace-accent3: var(--ds-accent-100);
    --ace-bg2: var(--ds-neutral-700);
    --ace-bg3: var(--ds-neutral-600);

    --pe-accent2: var(--ds-accent-300);
    --pe-accent3: var(--ds-accent-100);
    --pe-bg2: var(--ds-neutral-700);
    --pe-bg3: var(--ds-neutral-600);

    --lc-bg-hover: var(--ds-neutral-700);
    --lc-bg-page: var(--ds-neutral-900);
    --lc-border-light: var(--ds-neutral-800);

}