/**
 * NetOS Modern Theme - CSS Variables & Dark Mode Support
 * Supports: System preference (default) + User override
 */

/* ========================================
   UNIVERSAL RESET
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ========================================
   CSS VARIABLES - Light Theme (Default)
   ======================================== */
:root {
    /* Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-tertiary: #999999;

    /* Borders & Dividers */
    --border-color: #e5e5e5;
    --border-hover: #000000;

    /* Accents */
    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-green-dark: #059669;

    /* Navigation */
    --nav-bg: rgba(255, 255, 255, 0.98);
    --nav-border: #e5e5e5;
    --nav-link-color: #666666;
    --nav-link-hover: #000000;
    --nav-link-bg-hover: #f5f5f5;

    /* Buttons */
    --btn-primary-bg: #000000;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #333333;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #000000;
    --btn-secondary-border: #e5e5e5;

    /* Cards */
    --card-bg: #ffffff;
    --card-border: #e5e5e5;
    --card-shadow: rgba(0, 0, 0, 0.05);
    --card-shadow-hover: rgba(0, 0, 0, 0.1);

    /* Forms */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-text: #111827;
    --input-placeholder: #9ca3af;
    --input-focus-border: #000000;
    --input-focus-shadow: rgba(0, 0, 0, 0.05);

    /* Hero Section */
    --hero-smoke-1: rgba(16, 185, 129, 0.08);
    --hero-smoke-2: rgba(0, 0, 0, 0.06);
    --hero-smoke-3: rgba(16, 185, 129, 0.04);
    --hero-smoke-4: rgba(0, 0, 0, 0.05);
    --hero-mesh-color: rgba(0, 0, 0, 0.03);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* ========================================
   DARK THEME
   ======================================== */
[data-theme="dark"] {
    /* Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #0a0a0a;
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-tertiary: #737373;

    /* Borders & Dividers */
    --border-color: #333333;
    --border-hover: #ffffff;

    /* Accents (keep green readable in dark mode) */
    --accent-green: #10b981;
    --accent-green-light: #064e3b;
    --accent-green-dark: #34d399;

    /* Navigation */
    --nav-bg: rgba(26, 26, 26, 0.98);
    --nav-border: #333333;
    --nav-link-color: #a3a3a3;
    --nav-link-hover: #ffffff;
    --nav-link-bg-hover: #2a2a2a;

    /* Buttons */
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #000000;
    --btn-primary-hover: #e5e5e5;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: #333333;

    /* Cards */
    --card-bg: #262626;
    --card-border: #333333;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-shadow-hover: rgba(0, 0, 0, 0.5);

    /* Forms */
    --input-bg: #262626;
    --input-border: #404040;
    --input-text: #ffffff;
    --input-placeholder: #737373;
    --input-focus-border: #ffffff;
    --input-focus-shadow: rgba(255, 255, 255, 0.1);

    /* Hero Section (darker smoke in dark mode) */
    --hero-smoke-1: rgba(16, 185, 129, 0.12);
    --hero-smoke-2: rgba(255, 255, 255, 0.08);
    --hero-smoke-3: rgba(16, 185, 129, 0.06);
    --hero-smoke-4: rgba(255, 255, 255, 0.05);
    --hero-mesh-color: rgba(255, 255, 255, 0.04);

    /* Shadows (more pronounced in dark mode) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
}

/* ========================================
   THEME ANIMATIONS
   ======================================== */

/* Smooth theme transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Disable transitions for theme change to prevent flash */
body.theme-transitioning * {
    transition: none !important;
}

/* Hero smoke animation */
@keyframes smokeFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    25% {
        transform: translate(3%, -2%) scale(1.05);
        opacity: 0.9;
    }
    50% {
        transform: translate(-2%, 3%) scale(0.95);
        opacity: 1;
    }
    75% {
        transform: translate(4%, 1%) scale(1.02);
        opacity: 0.95;
    }
}

/* Mesh pulse animation */
@keyframes meshPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.02);
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 140px;
}

/* Base body styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.6;
    min-height: 100vh;
}