/* ==========================================================================
   THEME - Dark mode with electric accents
   Adapted from AYO Engineering Modern Bold theme
   ========================================================================== */

:root {
    /* Backgrounds */
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #12121a;
    --color-bg-tertiary: #1a1a25;
    --color-bg-card: #16161f;

    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0b0;
    --color-text-muted: #606070;

    /* Accent Colors */
    --color-accent-primary: #00d4ff;
    --color-accent-secondary: #ff6b35;
    --color-accent-tertiary: #9d4edd;
    --color-accent-success: #00ff88;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #9d4edd 100%);
    --gradient-secondary: linear-gradient(135deg, #ff6b35 0%, #9d4edd 100%);
    --gradient-text: linear-gradient(135deg, #00d4ff 0%, #9d4edd 50%, #ff6b35 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 212, 255, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 212, 255, 0.15);
    --shadow-lg: 0 8px 40px rgba(0, 212, 255, 0.2);
    --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.4);
    --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 50px rgba(0, 212, 255, 0.2);

    /* Borders */
    --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
    --border-medium: 1px solid rgba(255, 255, 255, 0.12);
    --border-accent: 1px solid var(--color-accent-primary);

    /* Typography */
    --font-weight-heading: 700;
    --letter-spacing-wide: 0.1em;

    /* Navigation */
    --nav-bg: rgba(10, 10, 15, 0.85);
    --nav-bg-scrolled: rgba(10, 10, 15, 0.95);
    --nav-blur: blur(20px);
    --nav-border: 1px solid rgba(255, 255, 255, 0.05);
    --nav-link-color: var(--color-text-secondary);
    --nav-link-hover: var(--color-text-primary);
    --nav-link-active: var(--color-accent-primary);

    /* Buttons */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-text: #000000;
    --btn-primary-shadow: var(--shadow-glow);
    --btn-secondary-bg: transparent;
    --btn-secondary-border: var(--border-accent);
    --btn-secondary-text: var(--color-accent-primary);

    /* Cards */
    --card-bg: var(--color-bg-card);
    --card-border: var(--border-subtle);
    --card-shadow: var(--shadow-card);
    --card-hover-transform: translateY(-8px) scale(1.02);
    --card-hover-shadow: var(--shadow-card-hover);
    --card-hover-border: 1px solid rgba(0, 212, 255, 0.3);

    /* Forms */
    --input-bg: var(--color-bg-tertiary);
    --input-border: var(--border-medium);
    --input-focus-border: var(--color-accent-primary);
    --input-focus-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);

    /* Stats */
    --stat-number-color: var(--color-accent-primary);
    --stat-label-color: var(--color-text-secondary);

    /* Section Dividers */
    --section-divider: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);

    /* Animation */
    --animate-distance: 40px;
    --stagger-delay: 100ms;
}

/* Gradient text */
.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Grid background pattern */
.bg-grid-pattern {
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}