/* ============================================
   SHARED: CSS VARIABLES
   Версия: 7.2 - FPS Optimization
   
   ИЗМЕНЕНИЯ v7.2:
   - --aurora-glass-blur: 40px → 12px (3x less GPU load)
   - --glass-blur: 24px → 12px
   
   ИЗМЕНЕНИЯ v7.1:
   - FIX: Default --tg-header-height: 0px (was 56px).
   ============================================ */

/* ============================================
   FORCE DARK THEME - TELEGRAM OVERRIDE
   Эти стили перезаписывают любую тему Telegram
   ============================================ */

:root,
html,
body,
* {
    --tg-theme-bg-color: #0a0e14 !important;
    --tg-theme-text-color: #e8edf4 !important;
    --tg-theme-hint-color: #8899ab !important;
    --tg-theme-link-color: #667eea !important;
    --tg-theme-button-color: #667eea !important;
    --tg-theme-button-text-color: #ffffff !important;
    --tg-theme-secondary-bg-color: #151c25 !important;
    --tg-color-scheme: dark !important;
    color-scheme: dark !important;
}

/* Блокируем светлую тему даже если система её хочет */
@media (prefers-color-scheme: light) {
    :root, html, body {
        --tg-theme-bg-color: #0a0e14 !important;
        --tg-theme-text-color: #e8edf4 !important;
        color-scheme: dark !important;
    }
}

/* ============================================
   MAIN VARIABLES
   ============================================ */

:root {
    /* ============================================
       SAFE AREAS (iOS notch, Android cutouts)
       ============================================ */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    
    /* ============================================
       VIEWPORT & LAYOUT
       ============================================ */
    --app-height: 100vh; /* Overwritten by viewport.js at init */
    --app-width: 100%;
    --app-max-width: 480px;
    
    /* ============================================
       HEADER & TOP OFFSET
       ============================================ */
    --header-height: 64px;
    --tg-header-height: 0px;
    --top-offset: calc(var(--safe-top) + var(--tg-header-height));
    --header-total-height: calc(var(--top-offset) + var(--header-height));
    --content-top: var(--header-total-height);
    
    /* ============================================
       BOTTOM BAR
       ============================================ */
    --bottom-bar-height: 56px;
    --bottom-bar-gap: 12px;
    --bottom-bar-offset: calc(var(--bottom-bar-height) + var(--bottom-bar-gap) * 2);
    --content-bottom: calc(var(--bottom-bar-offset) + var(--safe-bottom));
    --content-bottom-none: var(--safe-bottom);
    --content-top-none: var(--safe-top);
    --screen-padding-x: 16px;
    
    /* ============================================
       PREMIUM COLOR PALETTE
       ============================================ */
    
    /* Background Layers */
    --bg-void: #050507;
    --bg-space: #0a0e14;
    --bg-nebula: #151c25;
    --bg-elevated: rgba(25, 35, 50, 0.95);
    --bg-surface: rgba(255, 255, 255, 0.03);
    
    /* Glass Effect (base) — v7.2: Optimized blur */
    --glass-bg: rgba(30, 42, 58, 0.45);
    --glass-bg-hover: rgba(30, 42, 58, 0.6);
    --glass-bg-active: rgba(30, 42, 58, 0.75);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.1);
    --glass-border-focus: rgba(102, 126, 234, 0.5);
    --glass-blur: 12px;
    
    /* Accent */
    --accent-primary: #667eea;
    --accent-secondary: #764ba2;
    --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --accent-glow: rgba(102, 126, 234, 0.25);
    --accent-glow-strong: rgba(102, 126, 234, 0.4);
    --accent-subtle: rgba(102, 126, 234, 0.08);
    
    /* Text */
    --text-primary: #e8edf4;
    --text-secondary: #8899ab;
    --text-tertiary: #5a6a7a;
    --text-disabled: #3d4a58;
    --text-placeholder: rgba(255, 255, 255, 0.3);
    
    /* Status */
    --color-success: #34d399;
    --color-danger: #f87171;
    --color-warning: #fbbf24;
    
    /* ============================================
       AURORA TOKENS (v7.0)
       ============================================ */
    
    /* Orb: Primary (Blue > Purple) */
    --aurora-primary: rgba(59, 130, 246, 0.6);
    --aurora-primary-end: rgba(139, 92, 246, 0.3);
    
    /* Orb: Secondary (Pink > Purple) */
    --aurora-secondary: rgba(236, 72, 153, 0.5);
    --aurora-secondary-end: rgba(168, 85, 247, 0.25);
    
    /* Orb: Accent (Cyan > Teal) */
    --aurora-accent: rgba(34, 211, 238, 0.5);
    --aurora-accent-end: rgba(6, 182, 212, 0.2);
    
    /* Mesh radial layers */
    --aurora-mesh-blue: rgba(56, 189, 248, 0.12);
    --aurora-mesh-purple: rgba(168, 85, 247, 0.1);
    --aurora-mesh-cyan: rgba(34, 211, 238, 0.08);
    
    /* Aurora Glass (hero + card) — v7.2: Optimized blur */
    --aurora-glass-bg: rgba(255, 255, 255, 0.08);
    --aurora-glass-border: rgba(255, 255, 255, 0.12);
    --aurora-glass-blur: 12px;
    --aurora-glass-inset: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    --aurora-glass-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    
    /* Aurora Text */
    --aurora-text-bright: #ffffff;
    --aurora-text-soft: rgba(255, 255, 255, 0.55);
    --aurora-text-muted: rgba(255, 255, 255, 0.35);
    
    /* Noise */
    --aurora-noise-opacity: 0.025;
    
    /* ============================================
       HERO TOKENS (v7.0)
       ============================================ */
    --hero-title-size: clamp(32px, 8vw, 44px);
    --hero-title-weight: 700;
    --hero-title-tracking: -1.5px;
    --hero-subtitle-size: 17px;
    --hero-cta-radius: 16px;
    --hero-cta-shadow: 0 10px 40px rgba(255, 255, 255, 0.15);
    
    /* ============================================
       TYPOGRAPHY — adaptive with clamp()
       ============================================ */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-size-xs: clamp(10px, 2.6vw, 11px);
    --font-size-sm: clamp(12px, 3vw, 13px);
    --font-size-md: clamp(14px, 3.5vw, 15px);
    --font-size-lg: clamp(15px, 4vw, 17px);
    --font-size-xl: clamp(18px, 4.8vw, 20px);
    --font-size-xxl: clamp(21px, 5.5vw, 24px);

    /* Interactive input font-size: MUST be ≥16px to prevent iOS auto-zoom.
       Do NOT override this in viewport-compact/medium/tg-desktop — keep constant. */
    --input-font-size: 16px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --tracking-tight: -0.02em;
    --tracking-normal: -0.01em;
    --tracking-wide: 0.02em;
    --tracking-widest: 0.06em;
    
    /* ============================================
       SPACING — adaptive with clamp()
       ============================================ */
    --spacing-xs: clamp(3px, 0.8vw, 4px);
    --spacing-sm: clamp(6px, 1.6vw, 8px);
    --spacing-md: clamp(10px, 2.5vw, 12px);
    --spacing-lg: clamp(12px, 3.2vw, 16px);
    --spacing-xl: clamp(16px, 4vw, 20px);
    --spacing-xxl: clamp(18px, 4.8vw, 24px);
    --spacing-3xl: clamp(24px, 6.4vw, 32px);
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    
    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.3);
    --shadow-cta: 0 4px 20px var(--accent-glow);
    --shadow-cta-hover: 0 8px 32px var(--accent-glow-strong);
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    
    --transition-fast: 150ms;
    --transition-normal: 250ms;
    --transition-slow: 400ms;
    
    /* ============================================
       Z-INDEX LAYERS
       ============================================ */
    --z-background: -1;
    --z-aurora: 0;
    --z-content: 1;
    --z-screen: 2;
    --z-header: 100;
    --z-sticky: 20;
    --z-dropdown: 500;
    --z-bottom-bar: 150;
    --z-overlay: 600;
    --z-modal: 700;
    --z-toast: 10000;
    
    /* ============================================
       COMPONENT SIZES — adaptive
       ============================================ */
    --input-height: clamp(42px, 7vh, 52px);
    --button-height: clamp(44px, 7.5vh, 56px);
}

/* ============================================
   HEIGHT BREAKPOINTS — JS-class based

   Classes set ONCE at init by viewport.js based on
   initial viewport height. NEVER change on keyboard.

   body.viewport-compact  → initialHeight ≤ 600px (iPhone SE)
   body.viewport-medium   → initialHeight 601-700px (iPhone 13 mini)
   Default (no class)     → initialHeight > 700px
   ============================================ */

body.viewport-compact {
    --spacing-xs: 2px;
    --spacing-sm: 5px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 14px;
    --spacing-xxl: 16px;
    --spacing-3xl: 20px;

    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 13px;
    --font-size-lg: 15px;
    --font-size-xl: 17px;
    --font-size-xxl: 20px;

    --input-height: 40px;
    --button-height: 42px;

    --header-height: 52px;
    --bottom-bar-gap: 8px;
}

body.viewport-medium {
    --spacing-xs: 3px;
    --spacing-sm: 6px;
    --spacing-md: 10px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-xxl: 20px;
    --spacing-3xl: 24px;

    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 22px;

    --input-height: 44px;
    --button-height: 46px;

    --header-height: 56px;
}

/* ============================================
   DESKTOP TELEGRAM
   ============================================ */

body.tg-desktop {
    --tg-header-height: 0px;
    --top-offset: var(--safe-top);
    --header-total-height: calc(var(--safe-top) + var(--header-height));
}

/* ============================================
   MOBILE TELEGRAM (iOS / Android)
   ============================================ */

body.tg-mobile {
    --tg-header-height: 33px;
    --top-offset: calc(var(--safe-top) + var(--tg-header-height));
    --header-total-height: calc(var(--top-offset) + var(--header-height));
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
    }
}