/* ============================================
   V2Bot Landing - CSS Variables (Light Theme)
   Version: 2.0
   ============================================ */

:root {
    /* ============================================
       СВЕТЛАЯ БАЗА
       ============================================ */
    --bg-primary: #FFFDF7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F8F7F4;
    --bg-hero: linear-gradient(135deg, #FFF9E6 0%, #FFFDF7 50%, #F0FEFF 100%);

    /* ============================================
       АКЦЕНТЫ ИЗ ЛОГОТИПА V2Bot
       ============================================ */
    /* Gold - основной акцент */
    --gold-primary: #D4A853;
    --gold-light: #E8C97A;
    --gold-dark: #B8923A;
    --gold-hover: #F4D03F;
    --gold-gradient: linear-gradient(135deg, #D4A853 0%, #F4D03F 50%, #E8C97A 100%);
    --gold-glow: rgba(212, 168, 83, 0.3);

    /* Cyan - вторичный акцент */
    --cyan-primary: #00D4FF;
    --cyan-light: #66E5FF;
    --cyan-dark: #00A8CC;
    --cyan-glow: rgba(0, 212, 255, 0.25);

    /* Orange - энергетические точки */
    --orange-accent: #FF8C00;
    --orange-light: #FFA940;
    --orange-glow: rgba(255, 140, 0, 0.3);

    /* ============================================
       ГРАДИЕНТЫ
       ============================================ */
    --gradient-brand: linear-gradient(135deg, #D4A853 0%, #00D4FF 100%);
    --gradient-hero-bg: linear-gradient(135deg,
        rgba(212, 168, 83, 0.08) 0%,
        rgba(0, 212, 255, 0.05) 50%,
        rgba(255, 140, 0, 0.03) 100%);
    --gradient-energy: linear-gradient(90deg, #D4A853, #00D4FF, #FF8C00);
    --gradient-card-hover: linear-gradient(135deg,
        rgba(212, 168, 83, 0.05) 0%,
        rgba(0, 212, 255, 0.05) 100%);

    /* ============================================
       ТЕКСТ
       ============================================ */
    --text-primary: #1A1A2E;
    --text-secondary: #4A4A5A;
    --text-muted: #8A8A9A;
    --text-accent: #D4A853;
    --text-on-gold: #FFFFFF;
    --text-on-dark: #FFFFFF;

    /* ============================================
       BORDERS & SURFACES
       ============================================ */
    --border-default: rgba(212, 168, 83, 0.2);
    --border-hover: rgba(0, 212, 255, 0.5);
    --border-card: rgba(0, 0, 0, 0.06);
    --border-light: rgba(0, 0, 0, 0.04);

    /* Glassmorphism */
    --surface-glass: rgba(255, 255, 255, 0.7);
    --surface-glass-strong: rgba(255, 255, 255, 0.85);
    --surface-card: rgba(255, 255, 255, 0.9);
    --surface-overlay: rgba(255, 253, 247, 0.95);

    /* ============================================
       ТЕНИ
       ============================================ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow-gold: 0 0 40px rgba(212, 168, 83, 0.25);
    --shadow-glow-cyan: 0 0 40px rgba(0, 212, 255, 0.2);

    /* ============================================
       SEMANTIC COLORS
       ============================================ */
    --success: #22C55E;
    --success-light: rgba(34, 197, 94, 0.15);
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font Sizes */
    --fs-hero: clamp(36px, 8vw, 64px);
    --fs-h1: clamp(28px, 5vw, 40px);
    --fs-h2: clamp(24px, 4vw, 32px);
    --fs-h3: clamp(20px, 3vw, 24px);
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-caption: 12px;

    /* ============================================
       SPACING
       ============================================ */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* ============================================
       LAYOUT
       ============================================ */
    --container-max: 1200px;
    --container-padding: 24px;
    --header-height: 72px;

    /* ============================================
       RADIUS
       ============================================ */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ============================================
       Z-INDEX
       ============================================ */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-modal: 2000;
    --z-toast: 3000;
}

/* ============================================
   BREAKPOINTS (as CSS custom media - future)
   For now use in media queries directly:
   375px - Mobile
   768px - Tablet
   1024px - Laptop
   1280px - Desktop
   1920px - Large
   ============================================ */