/**
 * PROKTECH - CSS Design System Variables
 * Enterprise-Level Theming Configuration
 */

:root {
    /* Primary Colors */
    --primary-cyan: #00bcd4;
    --primary-blue: #1e3a8a;

    /* Background Colors */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a2e;
    --bg-quaternary: #16213e;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-accent: #00bcd4;
    --text-muted: #94a3b8;

    /* Gradients */
    --gradient-primary: linear-gradient(45deg, var(--primary-cyan), var(--primary-blue));
    --gradient-background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 30%, var(--bg-quaternary) 70%, var(--bg-primary) 100%);
    --gradient-card: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
    --gradient-service: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);

    /* Spacing */
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 60px;
    --spacing-3xl: 80px;
    --spacing-4xl: 120px;

    /* Border Radius */
    --radius-sm: 10px;
    --radius-md: 15px;
    --radius-lg: 20px;
    --radius-xl: 25px;
    --radius-pill: 50px;

    /* Shadows */
    --shadow-sm: 0 5px 20px rgba(0, 188, 212, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 188, 212, 0.3);
    --shadow-lg: 0 15px 40px rgba(0, 188, 212, 0.5);
    --shadow-xl: 0 20px 40px rgba(0, 188, 212, 0.3);
    --shadow-2xl: 0 30px 60px rgba(0, 188, 212, 0.3);

    /* Borders */
    --border-primary: 1px solid rgba(0, 188, 212, 0.2);
    --border-secondary: 1px solid rgba(0, 188, 212, 0.3);

    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.5s ease;
    --transition-slow: 1s ease;

    /* Typography */
    --font-family-primary: 'Arial', sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 1.1rem;
    --font-size-md: 1.2rem;
    --font-size-lg: 1.3rem;
    --font-size-xl: 1.6rem;
    --font-size-2xl: 1.8rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.5rem;
    --font-size-7xl: 5rem;

    /* Line Heights */
    --line-height-tight: 1.7;
    --line-height-normal: 1.8;

    /* Z-Index Layers */
    --z-index-background: -1;
    --z-index-base: 2;
    --z-index-header: 1000;

    /* Animation Durations */
    --anim-duration-fast: 2s;
    --anim-duration-medium: 3s;
    --anim-duration-slow: 4s;

    /* Container */
    --container-max-width: 1400px;
    --container-padding: 0 20px;

    /* Opacity Values */
    --opacity-low: 0.4;
    --opacity-medium: 0.6;
    --opacity-high: 0.9;
    --opacity-full: 0.95;

    /* Backdrop Filter */
    --backdrop-blur: blur(20px);

    /* Grid Sizes */
    --grid-size-sm: 60px;
    --grid-size-md: 100px;
    --grid-size-lg: 200px;
}