@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --font-outfit: 'Outfit', sans-serif;
    --font-inter: 'Inter', sans-serif;

    /* Theme Palette - Modern Forest Green & Mint */
    --color-primary-900: #081c15;
    --color-primary-800: #1b4332;
    --color-primary-700: #2d6a4f;
    --color-primary-600: #40916c;
    --color-primary-500: #52b788;
    --color-primary-400: #74c69d;
    --color-primary-300: #95d5b2;
    --color-primary-200: #b7e4c7;
    --color-primary-100: #d8f3dc;
    
    --color-accent: #10b981;
    --color-accent-hover: #059669;
    
    --color-bg-light: #f5faf7;
    --color-bg-dark: #0a0f0d;
    
    --color-text-dark: #111b15;
    --color-text-light: #f5faf7;
    --color-text-muted: #627269;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(8, 28, 21, 0.05);
    --shadow-md: 0 10px 25px rgba(8, 28, 21, 0.08);
    --shadow-lg: 0 20px 40px rgba(8, 28, 21, 0.12);
    --shadow-glow: 0 0 25px rgba(16, 185, 129, 0.3);
    
    /* Borders */
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
    
    /* Animation Speeds */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base resets & styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-inter);
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-outfit);
    font-weight: 700;
}

/* Custom Premium Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(8, 28, 21, 0.05);
}
::-webkit-scrollbar-thumb {
    background: var(--color-primary-500);
    border-radius: 4px;
    transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-600);
}

/* Glassmorphism utility */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow-md);
}

.dark .glass-panel {
    background: rgba(10, 15, 13, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Gradients */
.green-grad-btn {
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-500) 100%);
    box-shadow: 0 4px 15px rgba(45, 106, 79, 0.3);
}

.green-grad-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-400) 100%);
    box-shadow: 0 6px 20px rgba(45, 106, 79, 0.4);
}

.dark-grad-btn {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.dark-grad-btn:hover {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}
.animate-float {
    animation: float 5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.5); }
}
.animate-glow {
    animation: pulse-glow 3s infinite;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

/* Interactive Digital NFC Card Container */
.nfc-card {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    transform-style: preserve-3d;
    box-shadow: var(--shadow-lg);
}

.nfc-card:hover {
    transform: translateY(-8px) rotateY(5deg);
    box-shadow: var(--shadow-lg), 0 15px 35px rgba(16, 185, 129, 0.15);
}

/* RTL Layout Fixes */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .fa-arrow-left {
    transform: rotate(180deg);
}

/* Theme Toggle Transitions */
.theme-transition {
    transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}