/* ==========================================================================
   DESIGN SYSTEM VARIABLES
   Solvevare - Premium Software Development Agency
   ========================================================================== */

:root {
    /* Standardized Spacing Scale Tokens */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;

    /* Container System Tokens */
    --container-max-width: 1280px;
    --container-padding: clamp(1.25rem, 4vw, 2.5rem);

    /* Page Background - Solid White */
    --color-bg-primary: #030202;

    /* Dark surfaces (hero, header, nav overlays) */
    --color-bg-dark: #0a0a0c;
    --color-bg-dark-secondary: #121217;
    --color-bg-dark-tertiary: #181822;
    --color-bg-overlay: rgba(10, 10, 12, 0.7);
    --color-bg-nav-mobile: rgba(10, 10, 12, 0.98);

    /* Text Colors - Light theme (for white bg sections) */
    --color-text-body: #1a1a2e;
    --color-text-body-secondary: #4a4a5a;
    --color-text-body-muted: #8a8a9a;

    /* Text Colors - Dark surfaces (hero, nav) */
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0b0;
    --color-text-muted: #62627a;

    /* Brand Accent Colors */
    --color-accent-purple: #5E0ED7;
    --color-accent-purple-glow: rgba(94, 14, 215, 0.35);
    --color-accent-purple-hover: #731bf0;

    /* Gradients */
    --gradient-glow: linear-gradient(135deg, var(--color-accent-purple) 0%, #3e0796 100%);
    --gradient-overlay: linear-gradient(to bottom, rgba(10, 10, 12, 0.4) 0%, rgba(10, 10, 12, 0.85) 100%);

    /* Fonts - Technical and clean */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Layout Dimensions */
    --max-width: 1440px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-circle: 50%;

    /* Transitions - Precise and expensive feeling */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.8s var(--ease-premium);
    --transition-medium: 0.4s var(--ease-premium);
    --transition-fast: 0.2s ease;
}