/* =========================================
   MANU PORTFOLIO
   GLOBAL DESIGN VARIABLES
   ========================================= */

:root {

    /* =====================================
       COLORS
       ===================================== */

    /* Backgrounds */
    --color-background: #050408;
    --color-surface: #0B0910;
    --color-surface-elevated: #12101A;

    /* Primary */
    --color-primary: #8B5CF6;
    --color-primary-light: #A855F7;
    --color-primary-soft: #C084FC;

    /* Secondary */
    --color-secondary: #7C3AED;

    /* Text */
    --color-text: #F5F3FF;
    --color-text-muted: #A8A3B8;
    --color-text-subtle: #6F6A7C;

    /* Borders */
    --color-border: rgba(168, 163, 184, 0.14);
    --color-border-strong: rgba(168, 163, 184, 0.24);

    /* Status */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;


    /* =====================================
       TYPOGRAPHY
       ===================================== */

    --font-primary:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-mono:
        "JetBrains Mono",
        "Fira Code",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;


    /* =====================================
       FONT WEIGHTS
       ===================================== */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* =====================================
       LAYOUT
       ===================================== */

    --container-width: 1280px;

    --container-padding: 24px;

    --header-height: 84px;


    /* =====================================
       SPACING
       ===================================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 120px;
    --space-14: 160px;


    /* =====================================
       SECTIONS
       ===================================== */

    --section-padding-block: clamp(
        80px,
        10vw,
        140px
    );


    /* =====================================
       BORDER RADIUS
       ===================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 999px;


    /* =====================================
       SHADOWS
       ===================================== */

    --shadow-sm:
        0 4px 16px rgba(0, 0, 0, 0.20);

    --shadow-md:
        0 12px 35px rgba(0, 0, 0, 0.30);

    --shadow-lg:
        0 25px 70px rgba(0, 0, 0, 0.40);

    --shadow-primary:
        0 15px 45px rgba(139, 92, 246, 0.20);


    /* =====================================
       TRANSITIONS
       ===================================== */

    --transition-fast:
        0.2s ease;

    --transition-base:
        0.3s ease;

    --transition-slow:
        0.5s ease;


    /* =====================================
       Z-INDEX
       ===================================== */

    --z-base: 1;
    --z-content: 10;
    --z-overlay: 20;
    --z-header: 100;
    --z-navigation: 200;
    --z-modal: 1000;


    /* =====================================
       GRADIENTS
       ===================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #8B5CF6 0%,
            #A855F7 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #0B0910 0%,
            #12101A 100%
        );

    --gradient-glow:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.20),
            transparent 70%
        );


    /* =====================================
       CONTAINER
       ===================================== */

    --container-inline-padding:
        var(--container-padding);
}