/* ============================================================================
   LEANPIVOT BACKWARD COMPATIBILITY LAYER
   Version: 4.0

   Maps deprecated token names and class names to the canonical --lp-* system.
   Loaded globally via base.html after lp-tokens.css and lp-components.css.

   TEMPORARY: Remove this file once all templates and CSS files have been
   migrated to use --lp-* tokens directly.
   ============================================================================ */

:root {
    /* ==================================================================
       dashboard-styles.css bare-name tokens
       ================================================================== */
    --primary: var(--lp-primary);
    --success: var(--lp-dashboard-success);
    --warning: var(--lp-dashboard-warning);
    --danger: var(--lp-dashboard-danger);
    --info: var(--lp-dashboard-info);
    --secondary: var(--lp-secondary);
    --light: #f3f4f6;
    --dark: #111827;

    --gradient-primary: var(--lp-gradient-primary);
    --gradient-primary-light: var(--lp-gradient-primary-light);
    --gradient-primary-lighter: var(--lp-gradient-primary-lighter);
    --gradient-danger: var(--lp-gradient-danger);

    --card-radius: 0.75rem;
    --section-spacing: 1.5rem;
    --border-radius: 12px;
    --spacing-unit: 1.25rem;

    --card-shadow: var(--lp-shadow-card);
    --card-shadow-hover: var(--lp-shadow-card-hover);
    --card-hover-shadow: var(--lp-shadow-card-hover);
    --lift-sm: translateY(-2px);
    --lift-md: translateY(-5px);
    --transition: all 0.3s var(--lp-ease);

    /* ==================================================================
       design-system.css --color-* tokens
       ================================================================== */
    --color-primary: var(--lp-primary);
    --color-primary-dark: var(--lp-primary-dark);
    --color-primary-darker: var(--lp-primary-darker);
    --color-primary-light: var(--lp-primary-light);
    --color-primary-lighter: var(--lp-primary-lighter);
    --color-primary-50: var(--lp-primary-50);
    --color-primary-100: var(--lp-primary-100);

    --color-secondary: var(--lp-orange);
    --color-secondary-dark: var(--lp-orange-dark);
    --color-secondary-light: #ffb74d;
    --color-secondary-lighter: #ffcc80;
    --color-secondary-50: #fff3e0;
    --color-secondary-100: #ffe0b2;

    --color-accent: var(--lp-accent-blue);
    --color-accent-dark: #0288d1;
    --color-accent-light: #4fc3f7;

    --color-dashboard-primary: var(--lp-primary);
    --color-dashboard-primary-dark: var(--lp-primary-dark);
    --color-dashboard-primary-light: var(--lp-primary-light);
    --color-dashboard-success: var(--lp-dashboard-success);
    --color-dashboard-success-dark: var(--lp-dashboard-success-dark);
    --color-dashboard-warning: var(--lp-dashboard-warning);
    --color-dashboard-warning-dark: var(--lp-dashboard-warning-dark);
    --color-dashboard-danger: var(--lp-dashboard-danger);
    --color-dashboard-danger-dark: var(--lp-dashboard-danger-dark);
    --color-dashboard-info: var(--lp-dashboard-info);
    --color-dashboard-info-dark: var(--lp-dashboard-info-dark);

    --color-success: var(--lp-success-600);
    --color-success-dark: var(--lp-success-700);
    --color-success-light: var(--lp-success-500);
    --color-success-bg: var(--lp-success-100);

    --color-warning: var(--lp-warning-500);
    --color-warning-dark: var(--lp-warning-600);
    --color-warning-light: var(--lp-warning-400);
    --color-warning-bg: var(--lp-warning-bg);

    --color-danger: var(--lp-danger-500);
    --color-danger-dark: var(--lp-danger-600);
    --color-danger-light: var(--lp-danger-400);
    --color-danger-bg: var(--lp-danger-bg);

    /* ==================================================================
       design-system.css text/surface tokens
       ================================================================== */
    --text-primary: var(--lp-text-primary);
    --text-secondary: var(--lp-text-secondary);
    --text-tertiary: var(--lp-text-tertiary);
    --text-inverse: var(--lp-text-inverse);
    --text-link: var(--lp-text-link);
    --text-link-hover: var(--lp-text-link-hover);

    --surface-primary: var(--lp-surface-primary);
    --surface-secondary: var(--lp-surface-secondary);
    --surface-tertiary: var(--lp-surface-tertiary);
    --border-light: var(--lp-border-light);
    --border-medium: var(--lp-border-medium);

    /* ==================================================================
       design-system.css shadow tokens
       ================================================================== */
    --shadow-light: var(--lp-shadow-xs);
    --shadow-medium: var(--lp-shadow-md);
    --shadow-heavy: var(--lp-shadow-xl);
    --shadow-card: var(--lp-shadow-card);
    --shadow-card-hover: var(--lp-shadow-card-hover);
    --shadow-primary: var(--lp-shadow-primary);
    --shadow-secondary: var(--lp-shadow-orange);
    --shadow-success: var(--lp-shadow-success);

    /* ==================================================================
       design-system.css spacing tokens
       ================================================================== */
    --spacing-0: var(--lp-space-0);
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --section-padding-y: var(--lp-section-padding-y);
    --section-padding-y-mobile: var(--lp-section-padding-y-mobile);

    /* ==================================================================
       design-system.css typography tokens
       ================================================================== */
    --font-family: var(--lp-font-family);
    --font-family-heading: var(--lp-font-family);
    --font-family-mono: var(--lp-font-mono);

    --font-weight-light: var(--lp-font-light);
    --font-weight-regular: var(--lp-font-normal);
    --font-weight-medium: var(--lp-font-medium);
    --font-weight-semibold: var(--lp-font-semibold);
    --font-weight-bold: var(--lp-font-bold);

    --font-size-xs: var(--lp-text-xs);
    --font-size-sm: var(--lp-text-sm);
    --font-size-base: var(--lp-text-base);
    --font-size-lg: var(--lp-text-lg);
    --font-size-xl: var(--lp-text-xl);
    --font-size-2xl: var(--lp-text-2xl);
    --font-size-3xl: var(--lp-text-3xl);
    --font-size-4xl: var(--lp-text-4xl);
    --font-size-5xl: var(--lp-text-5xl);
    --font-size-6xl: var(--lp-text-6xl);
    --font-size-7xl: var(--lp-text-7xl);
    --font-size-2xs: 0.625rem;
    --font-size-3xs: 0.5625rem;
    --font-size-4xs: 0.5rem;

    --line-height-tight: var(--lp-leading-tight);
    --line-height-snug: var(--lp-leading-snug);
    --line-height-normal: var(--lp-leading-normal);
    --line-height-relaxed: var(--lp-leading-relaxed);

    /* ==================================================================
       design-system.css border radius tokens
       ================================================================== */
    --radius-sm: var(--lp-radius-sm);
    --radius-md: var(--lp-radius-base);
    --radius-lg: var(--lp-radius-md);
    --radius-xl: var(--lp-radius-lg);
    --radius-2xl: var(--lp-radius-xl);
    --radius-full: var(--lp-radius-full);

    /* ==================================================================
       design-system.css transition tokens
       ================================================================== */
    --transition-fast: var(--lp-transition-fast);
    --transition-base: 200ms var(--lp-ease-standard);
    --transition-slow: var(--lp-transition-slow);

    /* ==================================================================
       design-system.css z-index tokens
       ================================================================== */
    --z-dropdown: var(--lp-z-dropdown);
    --z-sticky: var(--lp-z-sticky);
    --z-fixed: var(--lp-z-fixed);
    --z-modal-backdrop: var(--lp-z-modal-backdrop);
    --z-modal: var(--lp-z-modal);
    --z-popover: var(--lp-z-popover);
    --z-tooltip: var(--lp-z-tooltip);

    /* ==================================================================
       design-system.css gradient tokens
       ================================================================== */
    --gradient-secondary: linear-gradient(135deg, var(--lp-orange) 0%, #ffb74d 100%);
    --gradient-hero: var(--lp-gradient-hero);
    --gradient-accent: linear-gradient(135deg, var(--lp-accent-blue) 0%, #4fc3f7 100%);
    --gradient-success: var(--lp-gradient-success);
    --gradient-border-primary: var(--lp-gradient-border-primary);
    --gradient-border-secondary: linear-gradient(90deg, var(--lp-orange) 0%, #ffb74d 100%);
    --gradient-border-success: var(--lp-gradient-border-success);

    /* ==================================================================
       design-system.css hero tokens
       ================================================================== */
    --hero-height-desktop: 500px;
    --hero-height-mobile: 400px;
    --hero-content-max-width: var(--lp-hero-content-max-width);
    --hero-headline-margin: 24px;
    --hero-subheadline-margin: 32px;
    --hero-button-gap: 16px;
    --hero-padding-desktop: var(--lp-hero-padding-desktop);
    --hero-padding-mobile: var(--lp-hero-padding-mobile);

    /* ==================================================================
       projects/design-tokens.css tokens
       ================================================================== */
    --color-primary-base: var(--lp-primary);
    --font-family-base: var(--lp-font-family);
    --space-0: var(--lp-space-0);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* ==================================================================
       orchestrator.css --orch-* tokens
       ================================================================== */
    --orch-accent: var(--lp-accent);
    --orch-accent-rgb: var(--project-color-rgb, 38, 166, 154);
    --orch-glass-bg: var(--lp-glass-bg);
    --orch-glass-blur: var(--lp-glass-blur);
    --orch-glass-border: var(--lp-glass-border);
    --orch-shadow-hover: var(--lp-shadow-card-hover);
    --orch-shadow-card: var(--lp-shadow-card);
    --orch-shadow-glow: var(--lp-accent-glow);
    --orch-ease: var(--lp-ease);
    --orch-ease-spring: var(--lp-ease-spring);
    --orch-duration: var(--lp-duration-base);
    --orch-duration-fast: var(--lp-duration-fast);

    /* ==================================================================
       hub.css --hub-* tokens
       ================================================================== */
    --hub-accent: var(--lp-accent);
    --hub-accent-dark: color-mix(in srgb, var(--lp-accent) 82%, #000);
    --hub-glass-bg: var(--lp-glass-bg);
    --hub-glass-blur: var(--lp-glass-blur);
    --hub-shadow-card: var(--lp-shadow-card);
    --hub-shadow-hover: var(--lp-shadow-card-hover);
    --hub-shadow-glow: var(--lp-accent-glow);
    --hub-ease: var(--lp-ease);
    --hub-ease-spring: var(--lp-ease-spring);
    --hub-duration: var(--lp-duration-base);
    --hub-duration-fast: var(--lp-duration-fast);
    --hub-radius: var(--lp-radius-lg);
    --hub-radius-sm: var(--lp-radius-base);
    --hub-radius-pill: var(--lp-radius-full);

    /* ==================================================================
       leanpivot-style-guide.css --lp-spacing-* (renamed to --lp-space-*)
       ================================================================== */
    --lp-spacing-1: var(--lp-space-1);
    --lp-spacing-2: var(--lp-space-2);
    --lp-spacing-3: var(--lp-space-3);
    --lp-spacing-4: var(--lp-space-4);
    --lp-spacing-5: var(--lp-space-5);
    --lp-spacing-6: var(--lp-space-6);
    --lp-spacing-8: var(--lp-space-8);
    --lp-spacing-10: var(--lp-space-10);
    --lp-spacing-12: var(--lp-space-12);
    --lp-spacing-16: var(--lp-space-16);

    /* ==================================================================
       leanpivot-style-guide.css --lp-primary-* (now --lp-brand-*)
       ================================================================== */
    --lp-primary-900: var(--lp-brand-900);
    --lp-primary-800: var(--lp-brand-800);
    --lp-primary-700: var(--lp-brand-700);
    --lp-primary-600: var(--lp-brand-600);
    --lp-primary-500: var(--lp-brand-500);
    --lp-primary-400: var(--lp-brand-400);
    --lp-primary-300: var(--lp-brand-300);
    --lp-primary-200: var(--lp-brand-200);
    --lp-primary-100: var(--lp-brand-100);

    /* ==================================================================
       leanpivot-style-guide.css --lp-border-radius-*
       ================================================================== */
    --lp-border-radius-sm: var(--lp-radius-sm);
    --lp-border-radius-base: var(--lp-radius-base);
    --lp-border-radius-md: var(--lp-radius-md);
    --lp-border-radius-lg: var(--lp-radius-lg);
    --lp-border-radius-xl: var(--lp-radius-xl);
    --lp-border-radius-full: var(--lp-radius-full);

    /* ==================================================================
       leanpivot-style-guide.css --lp-shadow-* (keep as-is, already canonical)
       Gradients already use --lp-gradient-* (keep as-is)
       ================================================================== */
    --lp-gradient-primary: var(--lp-gradient-brand);
    --lp-gradient-primary-bright: var(--lp-gradient-brand-bright);
}

/* ==================================================================
   CLASS NAME ALIASES
   Maps deprecated class names to canonical implementations.
   ================================================================== */

/* .orchestrator-empty-state → .lp-empty-state */
.orchestrator-empty-state {
    text-align: center;
    padding: 5rem 2.5rem;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--lp-accent) 5%, white) 0%,
        color-mix(in srgb, var(--lp-accent) 10%, white) 50%,
        color-mix(in srgb, var(--lp-brand-500, #0EA5E9) 6%, white) 100%
    );
    border-radius: var(--lp-radius-xl, 24px);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 12%, white);
}
.orchestrator-empty-state .empty-icon {
    width: 88px; height: 88px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lp-accent) 15%, transparent) 0%, color-mix(in srgb, var(--lp-accent) 8%, transparent) 100%);
    border-radius: var(--lp-radius-xl, 24px);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 2rem; color: var(--lp-accent); font-size: 2rem;
    transition: transform var(--lp-duration-base) var(--lp-ease-spring);
}
.orchestrator-empty-state:hover .empty-icon { transform: scale(1.06) rotate(-3deg); }
.orchestrator-empty-state h3 { font-size: var(--lp-text-2xl); font-weight: 700; color: var(--lp-slate-900); margin-bottom: 0.625rem; }
.orchestrator-empty-state p { color: var(--lp-slate-500); margin-bottom: 2rem; font-size: var(--lp-text-base); max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* .orch-animate-in → .lp-animate-in */
.orch-animate-in { animation: lpFadeIn var(--lp-duration-base) var(--lp-ease) both; }

/* .orch-stagger → .lp-stagger */
.orch-stagger > * { animation: lpFadeIn var(--lp-duration-base) var(--lp-ease) both; }
.orch-stagger > *:nth-child(1) { animation-delay: 0ms; }
.orch-stagger > *:nth-child(2) { animation-delay: 60ms; }
.orch-stagger > *:nth-child(3) { animation-delay: 120ms; }
.orch-stagger > *:nth-child(4) { animation-delay: 180ms; }
.orch-stagger > *:nth-child(5) { animation-delay: 240ms; }
.orch-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* .ds-btn → .lp-btn aliases */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--lp-space-2); padding: var(--lp-space-3) var(--lp-space-5); font-family: var(--lp-font-family); font-size: var(--lp-text-base); font-weight: var(--lp-font-medium); line-height: 1.5; text-decoration: none; border: 1px solid transparent; border-radius: var(--lp-radius-base); cursor: pointer; transition: all var(--lp-duration-base) var(--lp-ease); white-space: nowrap; }
.ds-btn:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }
.ds-btn:disabled, .ds-btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.ds-btn--primary { background: var(--lp-primary); color: white; box-shadow: var(--lp-shadow-xs); }
.ds-btn--primary:hover { background: var(--lp-primary-dark); transform: translateY(-1px); box-shadow: var(--lp-shadow-primary); }
.ds-btn--outline { background: transparent; color: var(--lp-primary); border-color: var(--lp-primary); }
.ds-btn--outline:hover { background: var(--lp-primary); color: white; transform: translateY(-1px); }
.ds-btn--light { background: white; color: var(--lp-primary); border-color: white; box-shadow: var(--lp-shadow-xs); }
.ds-btn--light:hover { background: var(--lp-primary-50); transform: translateY(-1px); box-shadow: var(--lp-shadow-md); }
.ds-btn--ghost { background: transparent; color: var(--lp-text-primary); border-color: transparent; }
.ds-btn--ghost:hover { background: var(--lp-surface-tertiary); }
.ds-btn--success { background: var(--lp-success-600); color: white; box-shadow: var(--lp-shadow-xs); }
.ds-btn--success:hover { background: var(--lp-success-700); transform: translateY(-1px); box-shadow: var(--lp-shadow-success); }
.ds-btn--sm { padding: var(--lp-space-2) var(--lp-space-4); font-size: var(--lp-text-sm); }
.ds-btn--lg { padding: var(--lp-space-4) var(--lp-space-8); font-size: var(--lp-text-lg); }
.ds-btn--xl { padding: var(--lp-space-5) var(--lp-space-10); font-size: var(--lp-text-lg); border-radius: var(--lp-radius-md); }
.ds-btn--block { width: 100%; }

/* .ds-badge → .lp-badge aliases */
.ds-badge { display: inline-flex; align-items: center; gap: var(--lp-space-1); padding: var(--lp-space-1) var(--lp-space-3); font-size: var(--lp-text-xs); font-weight: var(--lp-font-semibold); line-height: 1; border-radius: var(--lp-radius-full); text-transform: uppercase; letter-spacing: 0.05em; }
.ds-badge--primary { background: var(--lp-primary); color: white; }
.ds-badge--primary-light { background: var(--lp-primary-50); color: var(--lp-primary); }
.ds-badge--success { background: var(--lp-success-100); color: var(--lp-success-700); }
.ds-badge--warning { background: var(--lp-warning-bg); color: var(--lp-warning-600); }
.ds-badge--danger { background: var(--lp-danger-bg); color: var(--lp-danger-600); }
.ds-badge--neutral { background: var(--lp-surface-tertiary); color: var(--lp-text-secondary); }

/* .ds-card → .lp-card aliases */
.ds-card { background: white; border-radius: var(--lp-radius-base); border: 1px solid var(--lp-border-light); box-shadow: var(--lp-shadow-card); transition: transform var(--lp-duration-base) var(--lp-ease), box-shadow var(--lp-duration-base) var(--lp-ease); overflow: hidden; }
.ds-card:hover { transform: translateY(-2px); box-shadow: var(--lp-shadow-card-hover); }
.ds-card__header { padding: var(--lp-space-5) var(--lp-space-6); border-bottom: 1px solid var(--lp-border-light); }
.ds-card__body { padding: var(--lp-space-6); }
.ds-card__footer { padding: var(--lp-space-4) var(--lp-space-6); border-top: 1px solid var(--lp-border-light); background: var(--lp-surface-secondary); }

/* .ds-input / .ds-textarea / .ds-select aliases */
.ds-input { width: 100%; padding: var(--lp-space-3) var(--lp-space-4); font-family: var(--lp-font-family); font-size: var(--lp-text-base); line-height: 1.5; color: var(--lp-text-primary); background: white; border: 1px solid var(--lp-border-medium); border-radius: var(--lp-radius-base); transition: border-color var(--lp-duration-fast) var(--lp-ease), box-shadow var(--lp-duration-fast) var(--lp-ease); }
.ds-input::placeholder { color: var(--lp-text-tertiary); }
.ds-input:focus { outline: none; border-color: var(--lp-primary); box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.1); }
.ds-input:disabled { background: var(--lp-surface-secondary); cursor: not-allowed; }
.ds-textarea { min-height: 120px; resize: vertical; }
.ds-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--lp-space-4) center; padding-right: var(--lp-space-10); }
.ds-form-group { margin-bottom: var(--lp-space-4); }
.ds-form-label { display: block; margin-bottom: var(--lp-space-2); font-size: var(--lp-text-sm); font-weight: var(--lp-font-medium); color: var(--lp-text-primary); }
.ds-form-hint { margin-top: var(--lp-space-1); font-size: var(--lp-text-sm); color: var(--lp-text-tertiary); }
.ds-form-error { margin-top: var(--lp-space-1); font-size: var(--lp-text-sm); color: var(--lp-danger-500); }

/* .ds-alert aliases */
.ds-alert { display: flex; align-items: flex-start; gap: var(--lp-space-3); padding: var(--lp-space-4) var(--lp-space-5); border-radius: var(--lp-radius-base); border-left: 4px solid; }
.ds-alert__icon { flex-shrink: 0; font-size: var(--lp-text-lg); }
.ds-alert__content { flex: 1; }
.ds-alert__title { font-weight: var(--lp-font-semibold); margin-bottom: var(--lp-space-1); }
.ds-alert--info { background: var(--lp-primary-50); border-left-color: var(--lp-primary); }
.ds-alert--info .ds-alert__icon { color: var(--lp-primary); }
.ds-alert--success { background: var(--lp-success-100); border-left-color: var(--lp-success-600); }
.ds-alert--success .ds-alert__icon { color: var(--lp-success-600); }
.ds-alert--warning { background: var(--lp-warning-bg); border-left-color: var(--lp-warning-500); }
.ds-alert--warning .ds-alert__icon { color: var(--lp-warning-500); }
.ds-alert--danger { background: var(--lp-danger-bg); border-left-color: var(--lp-danger-500); }
.ds-alert--danger .ds-alert__icon { color: var(--lp-danger-500); }

/* ==================================================================
   END BACKWARD COMPATIBILITY LAYER
   ================================================================== */