/* =================================================================
   CSS VARIABLES - VELTECHLAB DESIGN SYSTEM
   ClientPortal Production Theme - Dark Cyberpunk
   ================================================================= */

:root {
    /* === DARK THEME COLORS - Cyberpunk Inspired === */
    /* Background Colors */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-card: #151520;
    --bg-hover: #1e1e2d;
    
    /* Accent Colors — синьо / небе / циан (като навигационния градиент) */
    --accent-primary: #60a5fa;
    --accent-secondary: #38bdf8;
    --accent-tertiary: #6366f1;
    --accent-glow: rgba(96, 165, 250, 0.32);

    /* Primary Brand Colors — синя скала */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Secondary Colors — циан / небе (втори акцент вместо магента) */
    --secondary-50: #ecfeff;
    --secondary-100: #cffafe;
    --secondary-200: #a5f3fc;
    --secondary-300: #67e8f9;
    --secondary-400: #22d3ee;
    --secondary-500: #06b6d4;
    --secondary-600: #0891b2;
    --secondary-700: #0e7490;
    --secondary-800: #155e75;
    --secondary-900: #164e63;

    /* Neutral Colors - Dark Scale */
    --neutral-50: #f0f0f5;
    --neutral-100: #e0e0e8;
    --neutral-200: #c0c0d0;
    --neutral-300: #a0a0b0;
    --neutral-400: #808090;
    --neutral-500: #606070;
    --neutral-600: #404050;
    --neutral-700: #2a2a3a;
    --neutral-800: #1a1a25;
    --neutral-900: #0a0a0f;

    /* Dark Theme Colors */
    --dark-50: #f0f0f5;
    --dark-100: #e0e0e8;
    --dark-200: #c0c0d0;
    --dark-300: #a0a0b0;
    --dark-400: #808090;
    --dark-500: #606070;
    --dark-600: #404050;
    --dark-700: #2a2a3a;
    --dark-800: #1a1a25;
    --dark-900: #0a0a0f;

    /* Text Colors */
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b0;
    --text-muted: #606070;

    /* Status Colors — в същото синьо-цианово семейство */
    --success: #22d3ee;
    --warning: #ffb830;
    --error: #7dd3fc;
    --info: #3b82f6;
    
    /* Borders */
    --border-color: #2a2a3a;
    --border-focus: var(--accent-primary);

    /* === TYPOGRAPHY === */
    /* Font Families - DM Sans for modern look */
    --font-primary:
        "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;
    --font-secondary:
        "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;
    --font-mono:
        "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace;

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Font Sizes - Compact */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2rem; /* 32px */
    --text-5xl: 2.5rem; /* 40px */
    --text-6xl: 3rem; /* 48px */
    --text-7xl: 3.5rem; /* 56px */

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* === SPACING - Compact === */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    --space-20: 5rem; /* 80px */
    --space-24: 6rem; /* 96px */
    --space-32: 8rem; /* 128px */

    /* Hero scroll hint: reserved strip + gap над него (без припокриване с блоковете) */
    --hero-scroll-strip: clamp(4rem, 11vw, 5.75rem);
    --hero-scroll-clearance: clamp(1.05rem, 3.8vw, 1.65rem);
    --hero-scroll-bottom-inset: clamp(0.7rem, 2.4vw, 1.05rem);

    /* Разделители между секции (линия + „glow“) */
    --section-divider-max-width: min(94%, 1080px);
    --section-divider-height: 5px;
    --section-divider-radius: 999px;

    /* Навигация: акцентна линия под хедъра (синхрон със секционните разделители) */
    --nav-accent-line-height: 4px;
    --nav-accent-glow-height: 26px;

    /* === LAYOUT === */
    /* Container Sizes */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;

    /* Enhanced Breakpoints for All Devices */
    --breakpoint-xs: 480px; /* Small phones */
    --breakpoint-sm: 640px; /* Large phones */
    --breakpoint-md: 768px; /* Tablets */
    --breakpoint-lg: 1024px; /* Small laptops */
    --breakpoint-xl: 1280px; /* Desktops */
    --breakpoint-2xl: 1536px; /* Large desktops */
    --breakpoint-3xl: 1920px; /* Full HD */
    --breakpoint-4k: 2560px; /* 4K displays */

    /* Z-Index Scale */
    --z-auto: auto;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* === BORDERS === */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;

    /* Border Radius */
    --rounded-none: 0;
    --rounded-sm: 0.125rem; /* 2px */
    --rounded: 0.25rem; /* 4px */
    --rounded-md: 0.375rem; /* 6px */
    --rounded-lg: 0.5rem; /* 8px */
    --rounded-xl: 0.75rem; /* 12px */
    --rounded-2xl: 1rem; /* 16px */
    --rounded-3xl: 1.5rem; /* 24px */
    --rounded-full: 9999px;

    /* === SHADOWS - Enhanced for dark theme === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-2xl: 0 25px 60px rgba(0, 0, 0, 0.6);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* === TRANSITIONS === */
    --transition-none: none;
    --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-default:
        color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        fill 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-colors:
        color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        fill 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === ANIMATION DURATIONS === */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;

    /* === EASING FUNCTIONS === */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* === ACCESSIBILITY === */
    --touch-target-min: 44px; /* Minimum touch target size */
    --touch-target-comfortable: 48px; /* Comfortable touch target size */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--primary-500);
    --focus-ring-opacity: 0.3;

    /* === GRID SYSTEM === */
    --grid-columns: 12;
    --grid-gap: var(--space-4);
    --grid-gap-sm: var(--space-2);
    --grid-gap-lg: var(--space-6);
    --grid-gap-xl: var(--space-8);

    /* === DEVICE-SPECIFIC PADDING === */
    --mobile-padding: var(--space-4);
    --tablet-padding: var(--space-6);
    --desktop-padding: var(--space-8);
    --large-desktop-padding: var(--space-12);
}

/* === SEMANTIC COLOR TOKENS === */
:root {
    /* Dark Theme (Default) - ClientPortal Production Style */
    --color-background: var(--bg-primary);
    --color-surface: var(--bg-secondary);
    --color-surface-elevated: var(--bg-card);

    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-muted);
    --color-text-inverse: var(--bg-primary);

    --color-border: var(--border-color);
    --color-border-hover: #3a3a4a;
    --color-border-focus: var(--accent-primary);

    --color-accent: var(--accent-primary);
    --color-accent-hover: #93c5fd;
    --color-accent-light: rgba(96, 165, 250, 0.16);

    --color-primary: var(--primary-500);
    --color-primary-dark: var(--primary-700);

    /* Gradient backgrounds */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
    --gradient-secondary: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    --gradient-card: linear-gradient(135deg, rgba(26, 26, 37, 0.8), rgba(21, 21, 32, 0.9));
}