/* ============================================
   CSS VARIABLES & THEME - CYBER MODERN
   ============================================ */
:root {
    /* PALETTE GRADIENT UTAMA */
    --deep-navy: #003049;
    --vibrant-red: #D62828;
    --orange: #F77F00;
    --golden: #FCBF49;

    /* PALETTE SUASANA */
    --midnight: #050E3C;
    --royal-blue: #002455;
    --crimson: #DC0000;
    --bright-red: #FF3838;

    /* ASSIGNMENT VARIABEL */
    --primary: var(--deep-navy);
    --primary-dark: var(--midnight);
    --primary-light: var(--royal-blue);
    --secondary: var(--golden);
    --secondary-alt: var(--orange);
    --accent: var(--vibrant-red);
    --accent-light: var(--bright-red);
    --accent-dark: var(--crimson);

    /* CYBER MODERN COLOR SYSTEM */
    --cyber-dark: #0a0e27;
    --cyber-darker: #050714;
    --cyber-panel: rgba(255, 255, 255, 0.03);
    --cyber-border: rgba(252, 191, 73, 0.2);
    --cyber-glow: rgba(252, 191, 73, 0.3);
    --cyber-glow-strong: rgba(252, 191, 73, 0.6);
    --cyber-text: #e2e8f0;
    --cyber-text-dim: #94a3b8;
    --cyber-neon: #00f0ff;
    --cyber-neon-dim: rgba(0, 240, 255, 0.3);

    /* BACKGROUND */
    --bg-primary: var(--cyber-darker);
    --bg-secondary: var(--cyber-dark);
    --bg-dark: var(--midnight);
    --bg-midnight: var(--midnight);

    /* TEKS */
    --text-primary: var(--cyber-text);
    --text-secondary: #cbd5e1;
    --text-muted: var(--cyber-text-dim);
    --text-light: #ffffff;

    /* BORDER & SHADOW */
    --border: var(--cyber-border);
    --border-accent: var(--golden);

    /* GRADIENT */
    --gradient-primary: linear-gradient(135deg, var(--deep-navy) 0%, var(--royal-blue) 100%);
    --gradient-warm: linear-gradient(135deg, var(--vibrant-red) 0%, var(--orange) 50%, var(--golden) 100%);
    --gradient-hero: linear-gradient(135deg, var(--cyber-darker) 0%, var(--midnight) 50%, rgba(0, 36, 85, 0.8) 100%);
    --gradient-dark: linear-gradient(135deg, var(--midnight) 0%, var(--deep-navy) 100%);
    --gradient-accent: linear-gradient(135deg, var(--crimson) 0%, var(--bright-red) 100%);
    --gradient-full: linear-gradient(90deg, var(--deep-navy) 0%, var(--vibrant-red) 50%, var(--orange) 75%, var(--golden) 100%);
    --gradient-cyber: linear-gradient(135deg, var(--cyber-neon) 0%, var(--golden) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);

    /* TYPOGRAPHY */
    --font-primary: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* SPACING */
    --section-padding: 6rem 0;
    --container-width: 1200px;
    --container-padding: 1.5rem;

    /* TRANSITIONS */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* SHADOWS */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-warm: 0 0 20px rgba(252, 191, 73, 0.3);
    --shadow-red: 0 0 20px rgba(214, 40, 40, 0.3);
    --shadow-neon: 0 0 30px rgba(0, 240, 255, 0.2);
}