:root {
    --bg-primary: #F6F9FC;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-navbar: rgba(255, 255, 255, 0.8);
    --bg-footer: #0A2540;
    
    --text-primary: #0A2540;
    --text-secondary: #1e293b;
    --text-muted: #64748b;
    --text-footer: #ffffff;
    --text-footer-muted: rgba(255, 255, 255, 0.5);
    
    --border-color: #e2e8f0;
    --border-light: rgba(226, 232, 240, 0.5);
    
    --accent-primary: #635BFF;
    --accent-primary-hover: #5851DB;
    --accent-primary-light: rgba(99, 91, 255, 0.1);
    --accent-primary-glow: rgba(99, 91, 255, 0.39);
    
    --accent-cyan: #00D4FF;
    --accent-cyan-light: rgba(0, 212, 255, 0.1);
    
    /* Semantic colors for metrics - WCAG AA compliant */
    --color-positive: #059669;
    --color-positive-bg: rgba(5, 150, 105, 0.1);
    --color-positive-border: rgba(5, 150, 105, 0.3);
    --color-positive-text: #047857;
    
    --color-negative: #dc2626;
    --color-negative-bg: rgba(220, 38, 38, 0.1);
    --color-negative-border: rgba(220, 38, 38, 0.3);
    --color-negative-text: #b91c1c;
    
    --color-warning: #d97706;
    --color-warning-bg: rgba(217, 119, 6, 0.1);
    --color-warning-border: rgba(217, 119, 6, 0.3);
    --color-warning-text: #b45309;
    
    --color-neutral: #475569;
    --color-neutral-bg: rgba(71, 85, 105, 0.1);
    --color-neutral-border: rgba(71, 85, 105, 0.3);
    
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --card-shadow-hover: 0 20px 40px -12px rgba(99, 91, 255, 0.15);
    
    --mesh-gradient: linear-gradient(135deg, rgba(99, 91, 255, 0.03) 0%, rgba(0, 212, 255, 0.03) 50%, rgba(255, 255, 255, 0) 100%);
    
    --step-card-bg: #f8fafc;
    --screenshot-bg: #f1f5f9;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --bg-navbar: rgba(15, 23, 42, 0.9);
    --bg-footer: #020617;
    
    --text-primary: #f1f5f9;
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;
    --text-footer: #f1f5f9;
    --text-footer-muted: rgba(241, 245, 249, 0.5);
    
    --border-color: #334155;
    --border-light: rgba(51, 65, 85, 0.5);
    
    --accent-primary: #818cf8;
    --accent-primary-hover: #a5b4fc;
    --accent-primary-light: rgba(129, 140, 248, 0.15);
    --accent-primary-glow: rgba(129, 140, 248, 0.4);
    
    --accent-cyan: #22d3ee;
    --accent-cyan-light: rgba(34, 211, 238, 0.15);
    
    /* Semantic colors for dark mode - WCAG AA compliant */
    --color-positive: #10b981;
    --color-positive-bg: rgba(16, 185, 129, 0.15);
    --color-positive-border: rgba(16, 185, 129, 0.4);
    --color-positive-text: #34d399;
    
    --color-negative: #ef4444;
    --color-negative-bg: rgba(239, 68, 68, 0.15);
    --color-negative-border: rgba(239, 68, 68, 0.4);
    --color-negative-text: #f87171;
    
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-border: rgba(245, 158, 11, 0.4);
    --color-warning-text: #fbbf24;
    
    --color-neutral: #94a3b8;
    --color-neutral-bg: rgba(148, 163, 184, 0.15);
    --color-neutral-border: rgba(148, 163, 184, 0.4);
    
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 20px 40px -12px rgba(129, 140, 248, 0.25);
    
    --mesh-gradient: linear-gradient(135deg, rgba(129, 140, 248, 0.05) 0%, rgba(34, 211, 238, 0.05) 50%, rgba(15, 23, 42, 0) 100%);
    
    --step-card-bg: #1e293b;
    --screenshot-bg: #0f172a;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll.delay-100 { transition-delay: 0.1s; }
.animate-on-scroll.delay-200 { transition-delay: 0.2s; }
.animate-on-scroll.delay-300 { transition-delay: 0.3s; }
.animate-on-scroll.delay-400 { transition-delay: 0.4s; }

.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for grid children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.stagger-children.animate-in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.animate-in > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.animate-in > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.animate-in > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.animate-in > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.animate-in > *:nth-child(6) { transition-delay: 0.3s; }

.stagger-children.animate-in > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   TOOLTIPS (CSS-only)
   ============================================ */

[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 100;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 8px 12px;
    min-width: 180px;
    max-width: 280px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-tooltip]::after {
    content: '';
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text-primary);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
}

[data-tooltip]:hover::before {
    transform: translateX(-50%) translateY(0);
}

/* Tooltip position variants */
[data-tooltip-pos="bottom"]::before {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-pos="bottom"]::after {
    top: calc(100% + 4px);
    bottom: auto;
    border-top-color: transparent;
    border-bottom-color: var(--text-primary);
}

[data-tooltip-pos="bottom"]:hover::before {
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   ENHANCED HOVER EFFECTS
   ============================================ */

/* Interactive cards with lift effect */
.card-interactive {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* Button press effect */
.btn-press {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-press:active {
    transform: scale(0.97);
}

/* Link underline animation */
.link-animated {
    position: relative;
    text-decoration: none;
}

.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

.link-animated:hover::after {
    width: 100%;
}

/* Icon hover spin */
.icon-hover-spin {
    transition: transform 0.3s ease;
}

.icon-hover-spin:hover {
    transform: rotate(15deg);
}

/* Scale on hover */
.hover-scale {
    transition: transform 0.2s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Glow on hover */
.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px var(--accent-primary-glow);
}

/* Subtle pulse animation for attention */
@keyframes pulse-subtle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.pulse-attention {
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* Metric card info icon animation */
.metric-info-icon {
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.metric-info-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */

/* Screen reader only - visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible - ensure focus is always visible */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Global focus styles for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-primary-light);
}

/* Remove default focus ring since we have custom focus styles */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --accent-primary: #4f46e5;
        --text-primary: #000000;
        --border-color: #000000;
    }
    
    [data-theme="dark"] {
        --accent-primary: #a5b4fc;
        --text-primary: #ffffff;
        --border-color: #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   SEMANTIC METRIC COLORS
   ============================================ */

/* Positive metrics (revenue, profit, gains) */
.metric-positive {
    color: var(--color-positive-text);
}

.metric-positive-card {
    background-color: var(--color-positive-bg);
    border: 1px solid var(--color-positive-border);
}

.metric-positive-icon {
    color: var(--color-positive);
}

/* Negative metrics (losses, costs, warnings) */
.metric-negative {
    color: var(--color-negative-text);
}

.metric-negative-card {
    background-color: var(--color-negative-bg);
    border: 1px solid var(--color-negative-border);
}

.metric-negative-icon {
    color: var(--color-negative);
}

/* Warning metrics (costs, fees, moderate concerns) */
.metric-warning {
    color: var(--color-warning-text);
}

.metric-warning-card {
    background-color: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
}

.metric-warning-icon {
    color: var(--color-warning);
}

/* Neutral metrics (counts, informational) */
.metric-neutral {
    color: var(--color-neutral);
}

.metric-neutral-card {
    background-color: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
}

/* Badge variants using semantic colors */
.badge-positive {
    background-color: var(--color-positive-bg);
    color: var(--color-positive-text);
    border: 1px solid var(--color-positive-border);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-negative {
    background-color: var(--color-negative-bg);
    color: var(--color-negative-text);
    border: 1px solid var(--color-negative-border);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ============================================
   WCAG AA CONTRAST IMPROVEMENTS
   ============================================ */

/* Ensure muted text meets 4.5:1 contrast ratio */
.text-accessible-muted {
    color: #52525b; /* zinc-600, 4.6:1 on white */
}

/* High contrast text for important information */
.text-high-contrast {
    color: var(--text-primary);
    font-weight: 500;
}

/* Ensure links have sufficient contrast */
a:not(.btn-primary):not(.btn-secondary) {
    color: var(--accent-primary);
}

a:not(.btn-primary):not(.btn-secondary):hover {
    color: var(--accent-primary-hover);
}

/* Improved placeholder contrast */
::placeholder {
    color: #6b7280; /* gray-500, 4.6:1 on white */
    opacity: 1;
}

/* Focus states with high visibility */
.focus-high-contrast:focus {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Table row contrast improvements */
.table-row-alt:nth-child(even) {
    background-color: rgba(248, 250, 252, 1); /* slate-50 */
}

.table-row-alt:nth-child(odd) {
    background-color: #ffffff;
}

/* Improved disabled state contrast */
button:disabled,
input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Small text contrast improvement (minimum 4.5:1) */
.text-xs-accessible {
    color: #52525b; /* zinc-600 */
    font-size: 0.75rem;
}