/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
    /* Colors - Deep Ocean Blue */
    --color-base: #0a1628;
    --color-base-light: #0d1f3c;
    --color-surface: #132347;
    --color-surface-light: #1a3a5c;
    --color-primary: #00d4ff;
    --color-primary-dark: #00a8cc;
    --color-primary-glow: rgba(0, 212, 255, 0.4);
    --color-accent: #7b68ee;
    --color-accent-glow: rgba(123, 104, 238, 0.3);
    --color-text: #c8d4e6;
    --color-text-muted: #6b8299;
    --color-white: #ffffff;
    --color-border: #1e3a5f;
    --color-success: #00e676;
    --color-danger: #ff5252;

    /* Color Opacity Variants - Primary (Cyan) */
    --color-primary-08: rgba(0, 212, 255, 0.08);
    --color-primary-10: rgba(0, 212, 255, 0.1);
    --color-primary-12: rgba(0, 212, 255, 0.12);
    --color-primary-15: rgba(0, 212, 255, 0.15);
    --color-primary-20: rgba(0, 212, 255, 0.2);
    --color-primary-30: rgba(0, 212, 255, 0.3);
    --color-primary-50: rgba(0, 212, 255, 0.5);

    /* Color Opacity Variants - Accent (Purple) */
    --color-accent-08: rgba(123, 104, 238, 0.08);
    --color-accent-10: rgba(123, 104, 238, 0.1);
    --color-accent-15: rgba(123, 104, 238, 0.15);
    --color-accent-20: rgba(123, 104, 238, 0.2);
    --color-accent-30: rgba(123, 104, 238, 0.3);
    --color-accent-50: rgba(123, 104, 238, 0.5);

    /* Color Opacity Variants - Success (Green) */
    --color-success-08: rgba(0, 230, 118, 0.08);
    --color-success-10: rgba(0, 230, 118, 0.1);
    --color-success-15: rgba(0, 230, 118, 0.15);
    --color-success-20: rgba(0, 230, 118, 0.2);
    --color-success-30: rgba(0, 230, 118, 0.3);

    /* Gradients */
    --gradient-text: linear-gradient(135deg, var(--color-white) 0%, var(--color-text) 100%);
    --gradient-text-primary: linear-gradient(135deg, var(--color-white) 0%, var(--color-primary) 100%);
    --gradient-primary-accent: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-glow: 0 0 40px var(--color-primary-glow);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-primary: 0 8px 32px var(--color-primary-15);
    --shadow-accent: 0 8px 32px var(--color-accent-15);
    --shadow-success: 0 8px 32px var(--color-success-15);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-hover: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: var(--color-primary-30);
    --glass-blur: 20px;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-white);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    letter-spacing: -0.02em;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}