/* ============================================
   ROOT VARIABLES & THEME SYSTEM
   DEFAULT: Astegni Classic (Amber/Orange)
   ============================================ */
:root {
    /* Primary Colors - Now references palette variables */
    --primary-color: #F59E0B;
    --primary-hover: #D97706;
    --primary-active: #92400E;
    --primary-rgb: 245, 158, 11;

    --secondary-color: #8b5cf6;
    --secondary-hover: #7c3aed;

    /* Text Colors */
    --text: #7b3811;
    --text-muted: #6b7280;
    --text-danger: #ef4444;
    --text-success: #10b981;
    --text-primary: #111827;
    --text-secondary: #6b7280;

    /* UI Colors */
    --background: #ffffff;
    --background-rgb: 255, 255, 255;
    --heading: var(--primary-color);
    --highlight: #FFFFFF;
    --accent: var(--secondary-color);
    --accent-rgb: 139, 92, 246;
    --white: #ffffff;
    --error: #EF4444;
    --success: #10B981;

    /* Navigation */
    --nav-link: var(--text);
    --nav-link-hover: var(--primary-color);
    --nav-bg: #ffffff;
    --nav-bg-rgb: 255, 255, 255;

    /* Buttons */
    --button-bg: var(--primary-color);
    --button-text: #FFFFFF;
    --button-hover: var(--primary-hover);
    --button-active: var(--primary-active);
    --button-bg-rgb: var(--primary-rgb);
    --button-hover-rgb: 217, 119, 6;

    /* Borders */
    --border-color: #e5e7eb;
    --border-rgb: 229, 231, 235;

    /* Cards & Containers */
    --card-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --sidebar-footer-bg: #f9fafb;
    --activity-bg: #f9fafb;
    --hover-bg: #f3f4f6;

    /* Forms */
    --input-bg: #f9fafb;
    --search-bg: #f3f4f6;
    --modal-bg: #FFFFFF;
    --modal-text: var(--text);
    --modal-input-bg: #f9fafb;
    --modal-input-border: #e5e7eb;
    --search-heading: var(--primary-color);

    /* Footer */
    --footer-bg: #E5E7EB;
    --footer-text: var(--text);
    --footer-text-light: var(--text-muted);
    --footer-accent: var(--primary-color);
    --footer-hover: var(--primary-hover);
    --footer-border: rgba(var(--primary-rgb), 0.15);

    /* Badges */
    --badge-bg: rgba(var(--primary-rgb), 0.1);
    --badge-border: rgba(var(--primary-rgb), 0.3);

    /* KBD */
    --kbd-bg: #f3f4f6;
    --kbd-border: #e5e7eb;
    
    /* Transitions */
    --transition: all 0.3s ease-in-out;
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Z-Index Scale */
    --z-dropdown: 50;
    --z-modal: 100;
    --z-popover: 200;
    --z-tooltip: 300;
    --z-toast: 400;
    --z-overlay: 500;
    --z-sidebar: 1000;
    --z-navigation: 2000;
    --z-loading: 10000;
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #FFD54F;
    --primary-hover: #e6bf45;
    --primary-active: #FFB300;
    --primary-rgb: 255, 213, 79;
    
    --text: #E0E0E0;
    --text-muted: #9ca3af;
    --text-primary: #E0E0E0;
    --text-secondary: #9ca3af;
    
    --background: #1E1E1E;
    --background-rgb: 30, 30, 30;
    --heading: #FBC02D;
    --highlight: #424242;
    --accent: #a78bfa;
    --accent-rgb: 167, 139, 250;
    
    --nav-link: var(--text);
    --nav-link-hover: var(--primary-color);
    --nav-bg: #1a1a1a;
    --nav-bg-rgb: 26, 26, 26;
    
    --button-bg: #FFD54F;
    --button-text: #1E1E1E;
    --button-hover: #e6bf45;
    --button-active: #FFB300;
    --button-bg-rgb: 255, 213, 79;
    --button-hover-rgb: 230, 191, 69;
    
    --border-color: #404040;
    --border-rgb: 64, 64, 64;
    
    --card-bg: #1a1a1a;
    --dropdown-bg: #262626;
    --sidebar-bg: #1a1a1a;
    --sidebar-footer-bg: #262626;
    --activity-bg: #262626;
    --hover-bg: #374151;
    
    --input-bg: #262626;
    --search-bg: #1f1f1f;
    --modal-bg: #1E1E1E;
    --modal-text: #E0E0E0;
    --modal-input-bg: #262626;
    --modal-input-border: #404040;
    --search-heading: #FBC02D;
    
    --footer-bg: #424242;
    --footer-text: #E0E0E0;
    --footer-text-light: #a8a8a8;
    --footer-accent: #FFD54F;
    --footer-hover: #FBC02D;
    --footer-border: rgba(255, 213, 79, 0.2);
    
    --badge-bg: rgba(255, 213, 79, 0.15);
    --badge-border: rgba(255, 213, 79, 0.4);
    
    --kbd-bg: #262626;
    --kbd-border: #404040;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* Light theme specific overrides */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .nav-logo {
    color: var(--primary-color);
}

[data-theme="light"] .description,
[data-theme="light"] .no-results,
[data-theme="light"] input#search-input {
    color: #FFFFFF;
}

[data-theme="light"] input#search-input::-webkit-input-placeholder,
[data-theme="light"] input#search-input::-moz-placeholder {
    color: #D1D5DB;
}

/* Dark theme specific overrides */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: var(--primary-color);
}

[data-theme="dark"] .modal-content {
    background-color: rgba(0, 0, 0, 0.85);
    color: var(--text);
    border: 1px solid #555;
}

[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .modal-content textarea {
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--text);
    border: 1px solid #888;
}

[data-theme="dark"] .modal-content input::placeholder,
[data-theme="dark"] .modal-content textarea::placeholder {
    color: #A0AEC0;
}

[data-theme="dark"] .cta-button {
    background-color: var(--primary-color);
    color: var(--button-text);
}

[data-theme="light"] .cta-button {
    background-color: var(--primary-color);
    color: var(--button-text);
}


/* ============================================
   GLOBAL RESET & BASE STYLES
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 18px !important;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--background);
    color: var(--text);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Typography */
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; font-weight: 800; color: var(--heading); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.3; font-weight: 700; color: var(--heading); }
h3 { font-size: clamp(1.25rem, 3vw, 1.875rem); line-height: 1.4; font-weight: 600; color: var(--heading); }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); line-height: 1.5; font-weight: 600; color: var(--heading); }
h5 { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.5; font-weight: 500; }
h6 { font-size: clamp(0.875rem, 1.5vw, 1.125rem); line-height: 1.5; font-weight: 500; }
p { font-size: 1rem; line-height: 1.75; }

/* Selection */
::selection {
    background: var(--button-bg);
    color: var(--button-text);
}

::-moz-selection {
    background: var(--button-bg);
    color: var(--button-text);
}

/* Focus */
:focus-visible {
    outline: 2px solid var(--button-bg);
    outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--button-bg);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--button-hover);
}

/* Container */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 768px) { .container { padding: 0 2rem; } }

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.95); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-30px); } }
@keyframes slideInDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes slideOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(30px); } }
@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes scaleOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }
@keyframes gentlePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes rotateRing { to { transform: rotate(360deg); } }
@keyframes pulsate { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes floatPattern { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-20px, -20px) scale(1.05); } 66% { transform: translate(20px, -10px) scale(0.95); } }
@keyframes contentFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Footer-specific animations */
@keyframes waveDash { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -2000; } }
@keyframes zoomOut { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.8; } }
@keyframes zoomOutLine { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; } 50% { transform: translateX(-50%) scaleX(0.7); opacity: 0.6; } }
@keyframes pulseZoomLine { 0%, 100% { transform: translateX(-50%) scaleX(0.5); opacity: 0; } 50% { transform: translateX(-50%) scaleX(1); opacity: 0.3; } }
@keyframes gentleRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gentleRing { 0%, 100% { transform: rotate(0deg); } 5%, 15% { transform: rotate(-10deg); } 10%, 20% { transform: rotate(10deg); } }
@keyframes subtleGlow { 0%, 100% { box-shadow: 0 0 5px rgba(245, 158, 11, 0.1); } 50% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); } }
@keyframes onlinePulse { 0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); } 50% { transform: translateY(-50%) scale(1.1); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); } }
@keyframes livePulse { 0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); } 50% { transform: translateY(-50%) scale(1.2); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.1); } }
@keyframes overlayFadeIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(8px); } }
@keyframes modalSlideUp { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes successPulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); box-shadow: 0 0 40px rgba(16, 185, 129, 0.4); } 100% { transform: scale(1); } }

/* ============================================
   UTILITY CLASSES
   ============================================ */
.gradient-text {
    background: linear-gradient(135deg, var(--button-bg), var(--button-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass {
    background: rgba(var(--background-rgb), 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--border-rgb), 0.2);
}

.glow {
    box-shadow: 0 0 20px rgba(var(--button-bg-rgb), 0.3),
                0 0 40px rgba(var(--button-bg-rgb), 0.2),
                0 0 60px rgba(var(--button-bg-rgb), 0.1);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.skeleton {
    background: linear-gradient(90deg,
            rgba(var(--border-rgb), 0.2) 25%,
            rgba(var(--border-rgb), 0.3) 50%,
            rgba(var(--border-rgb), 0.2) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

.not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}