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

:root {
    /* 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;
}