/**
 * Ayit Component Library — Compatibility Layer
 *
 * The primary design system is defined in ayit.css.
 * This file provides backward-compatible aliases for the old vx-* variable names
 * and any additional component polish not covered by the core design system.
 *
 * Load ORDER: ayit.css → utilities.css → components.css
 */

/* ============================================
   BACKWARD-COMPATIBLE CSS VARIABLE ALIASES
   Maps old --vx-* token names to new AYIT tokens
   ============================================ */

:root {
    /* Old tokens → new AYIT tokens */
    --vx-primary: var(--accent);
    --vx-primary-dark: var(--accent);
    --vx-primary-hover: var(--accent2);

    --vx-success: var(--status-success);
    --vx-success-hover: var(--status-success);
    --vx-warning: var(--status-warning);
    --vx-danger: var(--accent);
    --vx-info: var(--status-info);

    --vx-bg: var(--bg);
    --vx-sidebar: var(--surface);
    --vx-surface: var(--surface);
    --vx-surface-elevated: var(--surface2);
    --vx-border: var(--border);

    --vx-text: var(--text);
    --vx-text-muted: var(--text-muted);
    --vx-text-disabled: var(--text-dim);

    /* Old radius/shadow/transition — remapped */
    --vx-radius-sm: var(--radius);
    --vx-radius-md: var(--radius);
    --vx-radius-lg: var(--radius);
    --vx-radius-full: 9999px;

    --vx-shadow-sm: none;
    --vx-shadow-md: none;
    --vx-shadow-lg: none;

    --vx-transition-fast: var(--transition);
    --vx-transition-normal: 0.2s ease;
    --vx-transition-slow: 0.2s ease;
}


/* ============================================
   ADDITIONAL COMPONENT POLISH
   (Not in the core ayit.css — page-specific enhancements)
   ============================================ */

/* Global atmospheric orb — uses Eagle Eye Amber accent */
main {
    position: relative;
}

main::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 179, 0, 0.04), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

html[dir="rtl"] main::before {
    right: auto;
    left: -200px;
}

main > * {
    position: relative;
    z-index: 1;
}

/* Card hover lift — AYIT: subtle border change only, NO shadow, NO transform lift */
[class*="bg-card-dark"],
.vx-card,
.vx-stat-card {
    transition: border-color var(--transition);
}

[class*="bg-card-dark"]:hover,
.vx-card:hover,
.vx-stat-card:hover {
    border-color: rgba(255, 179, 0, 0.3);
}

/* Stat number entrance animation */
@keyframes vx-stat-pop {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); opacity: 1; }
}

.vx-stat-loaded {
    animation: vx-stat-pop 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Slide-up animation */
.vx-slide-up {
    animation: vx-slide-up 0.2s ease-out;
}

@keyframes vx-slide-up {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fade-in animation */
.vx-fade-in {
    animation: vx-fade-in 0.2s ease-out;
}

@keyframes vx-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ============================================
   FONT FAMILY BACKWARD COMPAT
   Old Tailwind font-family classes → AYIT fonts
   ============================================ */

.font-\[\'Heebo\'\],
[style*="font-family: 'Heebo'"] {
    font-family: var(--font-sans) !important;
}


/* ============================================
   HEEBO FONT — RTL SPECIFIC OVERRIDES
   Ensure Hebrew text always gets Heebo
   ============================================ */

html[dir="rtl"] body,
html[dir="rtl"] .vx-btn,
html[dir="rtl"] .vx-input,
html[dir="rtl"] .vx-select,
html[dir="rtl"] .vx-textarea,
html[dir="rtl"] .vx-nav-item,
html[dir="rtl"] .vx-dropdown-item {
    font-family: var(--font-sans);
}

/* Mono font is always IBM Plex Mono regardless of language */
html[dir="rtl"] .vx-label,
html[dir="rtl"] .section-label,
html[dir="rtl"] .stat-label,
html[dir="rtl"] .meta-label,
html[dir="rtl"] .badge,
html[dir="rtl"] .vx-tab {
    font-family: var(--font-mono);
}