/* CYPHER_SYSTEMS - Matrix/Cyberpunk CSS Variables
   For ASP.NET implementation: Place in /wwwroot/css/variables.css
   ================================================================== */

:root {
    /* ==================== MATRIX COLOR SCHEME ==================== */
    /* Primary Colors - Matrix Green */
    --matrix-black: #0d0208; /* Pure background */
    --matrix-dark: #1a1a1a; /* Secondary background */
    --matrix-green: #00ff41; /* Primary brand color */
    --matrix-green-bright: #39ff14; /* Bright accent */
    --matrix-green-dim: #008f11; /* Dim accent */
    /* Neon Accents */
    --neon-cyan: #00ffff; /* Secondary accent */
    --neon-magenta: #ff00ff; /* Glitch effect */
    --neon-orange: #ff9500; /* Warning/highlight */
    --neon-red: #ff0040; /* Error/alert */
    /* Text Colors */
    --text-primary: #00ff41; /* Primary text - matrix green */
    --text-secondary: #33ff77; /* Secondary text - lighter green */
    --text-dim: #004d1a; /* Dimmed text */
    --text-highlight: #39ff14; /* Bright highlights */
    /* Surface & Effects */
    --surface: rgba(0, 255, 65, 0.05); /* Card background */
    --surface-glow: rgba(0, 255, 65, 0.1); /* Glowing surface */
    --surface-dark: rgba(0, 0, 0, 0.6); /* Dark panels */
    --scanline: rgba(0, 255, 65, 0.02); /* Scanline effect */
    /* Border & Glow */
    --border-primary: 2px solid var(--matrix-green);
    --border-cyan: 2px solid var(--neon-cyan);
    --glow-green: 0 0 20px var(--matrix-green);
    --glow-cyan: 0 0 20px var(--neon-cyan);
    --glow-strong: 0 0 40px var(--matrix-green);
    /* ==================== TYPOGRAPHY ==================== */
    /* Font Families */
    --font-display: 'Orbitron', sans-serif; /* Headers, titles */
    --font-body: 'Share Tech Mono', monospace; /* Body text */
    --font-terminal: 'VT323', monospace; /* Terminal text */
    /* Font Sizes */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 2rem; /* 32px */
    --text-4xl: 3rem; /* 48px */
    --text-5xl: 4rem; /* 64px */
    --text-6xl: 4.5rem; /* 72px */
    /* Font Weights */
    --weight-normal: 400;
    --weight-bold: 700;
    --weight-black: 900;
    /* Line Heights */
    --leading-tight: 1.1;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;
    /* Letter Spacing */
    --tracking-tight: -0.05em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.15em;
    /* ==================== SPACING ==================== */

    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 2rem; /* 32px */
    --spacing-lg: 3rem; /* 48px */
    --spacing-xl: 4rem; /* 64px */
    --spacing-2xl: 5rem; /* 80px */
    /* ==================== LAYOUT ==================== */
    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;
    /* ==================== EFFECTS ==================== */
    /* Shadows & Glows */
    --shadow-green: 0 0 30px rgba(0, 255, 65, 0.4);
    --shadow-cyan: 0 0 30px rgba(0, 255, 255, 0.4);
    --shadow-inset: inset 0 0 30px rgba(0, 255, 65, 0.1);
    /* Text Shadows */
    --text-glow-sm: 0 0 10px var(--matrix-green);
    --text-glow-md: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green);
    --text-glow-lg: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green), 0 0 40px var(--matrix-green), 0 0 80px var(--matrix-green);
    /* Clip Paths - Cyber corners */
    --clip-corner-sm: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    --clip-corner-md: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    --clip-corner-lg: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    /* ==================== TRANSITIONS ==================== */
    /* Durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;
    /* Easing */
    --ease-default: ease;
    --ease-in: ease-in;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
    /* ==================== Z-INDEX LAYERS ==================== */

    --z-background: 0;
    --z-content: 10;
    --z-nav: 100;
    --z-modal: 1000;
    --z-overlay: 9999;
}

/* ==================== GOOGLE FONTS IMPORT ==================== */
/* Add this to your HTML <head> or import in CSS:
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=VT323&family=Share+Tech+Mono&display=swap" rel="stylesheet">
*/