/**
 * CSS Custom Properties - Design System
 *
 * @package Nettuno
 */

:root {
    /* Colors */
    --color-primary: #6EC1E4;
    --color-secondary: #171718;
    --color-accent: #FF9C00;
    --color-background: #000000;
    --color-background-light: #0a0a0a;
    --color-background-card: #111111;
    --color-text: #F5F5F7;
    --color-text-muted: #8a8a8a;
    --color-border: #2a2a2a;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Gradient */
    --gradient-primary: linear-gradient(135deg, #158ff6 0%, #02E081 100%);
    --gradient-hero: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%);
    --gradient-card: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 100%);

    /* Typography */
    --font-primary: 'Poppins', sans-serif;
    --font-heading: 'Roboto', sans-serif;
    --font-accent: 'Roboto Slab', serif;

    /* Font sizes */
    --fs-hero: clamp(45px, 8vw, 80px);
    --fs-h1: clamp(36px, 5vw, 50px);
    --fs-h2: clamp(28px, 4vw, 40px);
    --fs-h3: clamp(22px, 3vw, 28px);
    --fs-h4: clamp(18px, 2.5vw, 22px);
    --fs-body: clamp(16px, 1.5vw, 18px);
    --fs-body-lg: clamp(18px, 2vw, 22px);
    --fs-small: 14px;
    --fs-xs: 12px;

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Line heights */
    --lh-tight: 1.1;
    --lh-heading: 1.2;
    --lh-body: 1.6;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* Container */
    --container-max: 1400px;
    --container-narrow: 900px;
    --container-padding: 20px;

    /* Border radius */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(110, 193, 228, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-modal: 400;
    --z-lightbox: 500;

    /* Header */
    --header-height: 80px;
}

/* Dark mode is default for this theme */
@media (prefers-color-scheme: light) {
    :root {
        /* Keep dark theme regardless of system preference */
    }
}