/* ========================================================= variables.css — Global CSS Custom Properties ========================================================= */ :root { /* ------------------------------------------------------- COLOR PALETTE ------------------------------------------------------- */ /* Base backgrounds */ --color-void: #0a0a0f; --color-navy: #0d1117; --color-navy-light: #161b22; /* Accent colors */ --color-green: #00ff41; --color-amber: #ffb000; --color-cyan: #00e5ff; --color-purple: #7c3aed; --color-red: #ff3366; /* Transparency variants — green */ --color-green-05: rgba(0, 255, 65, 0.05); --color-green-10: rgba(0, 255, 65, 0.1); --color-green-15: rgba(0, 255, 65, 0.15); --color-green-20: rgba(0, 255, 65, 0.2); --color-green-30: rgba(0, 255, 65, 0.3); --color-green-40: rgba(0, 255, 65, 0.4); --color-green-60: rgba(0, 255, 65, 0.6); --color-green-80: rgba(0, 255, 65, 0.8); /* Transparency variants — cyan */ --color-cyan-05: rgba(0, 229, 255, 0.05); --color-cyan-10: rgba(0, 229, 255, 0.1); --color-cyan-20: rgba(0, 229, 255, 0.2); --color-cyan-30: rgba(0, 229, 255, 0.3); --color-cyan-40: rgba(0, 229, 255, 0.4); /* Transparency variants — amber */ --color-amber-10: rgba(255, 176, 0, 0.1); --color-amber-20: rgba(255, 176, 0, 0.2); --color-amber-30: rgba(255, 176, 0, 0.3); /* Transparency variants — purple */ --color-purple-10: rgba(124, 58, 237, 0.1); --color-purple-20: rgba(124, 58, 237, 0.2); /* Text shades */ --text-primary: var(--color-green); --text-secondary: rgba(0, 255, 65, 0.6); --text-tertiary: rgba(0, 255, 65, 0.35); --text-muted: rgba(0, 255, 65, 0.2); /* ------------------------------------------------------- TYPOGRAPHY ------------------------------------------------------- */ --font-primary: "JetBrains Mono", monospace; --font-code: "Share Tech Mono", monospace; --font-retro: "VT323", monospace; --font-fallback: monospace; /* Font sizes — fluid with clamp() */ --fs-xs: clamp(0.65rem, 1.2vw, 0.75rem); --fs-sm: clamp(0.8rem, 1.5vw, 0.875rem); --fs-base: clamp(0.9rem, 1.8vw, 1rem); --fs-md: clamp(1rem, 2vw, 1.125rem); --fs-lg: clamp(1.125rem, 2.5vw, 1.25rem); --fs-xl: clamp(1.25rem, 3vw, 1.5rem); --fs-2xl: clamp(1.5rem, 4vw, 2rem); --fs-3xl: clamp(2rem, 5vw, 2.75rem); --fs-4xl: clamp(2.5rem, 7vw, 4.5rem); --fs-hero: clamp(3rem, 10vw, 7.5rem); /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.7; --lh-loose: 2; /* Letter spacing */ --ls-tighter: -0.03em; --ls-tight: -0.02em; --ls-normal: 0em; --ls-wide: 0.05em; --ls-wider: 0.1em; --ls-widest: 0.2em; /* ------------------------------------------------------- SPACING SCALE (4px base grid) ------------------------------------------------------- */ --space-px: 1px; --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px*/ --space-40: 10rem; /* 160px*/ /* ------------------------------------------------------- BORDER RADIUS ------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ------------------------------------------------------- BORDER / OUTLINE ------------------------------------------------------- */ --border-width: 1px; --border-subtle: 1px solid var(--color-green-10); --border-dim: 1px solid var(--color-green-20); --border-normal: 1px solid var(--color-green-30); --border-bright: 1px solid var(--color-green); /* ------------------------------------------------------- BOX SHADOWS / GLOWS ------------------------------------------------------- */ --glow-green-sm: 0 0 8px var(--color-green-40); --glow-green-md: 0 0 20px var(--color-green-30), 0 0 8px var(--color-green-40); --glow-green-lg: 0 0 40px var(--color-green-20), 0 0 20px var(--color-green-30), 0 0 8px var(--color-green-60); --glow-cyan-sm: 0 0 8px var(--color-cyan-40); --glow-cyan-md: 0 0 20px var(--color-cyan-30), 0 0 8px var(--color-cyan-40); --glow-cyan-lg: 0 0 40px var(--color-cyan-20), 0 0 20px var(--color-cyan-30), 0 0 8px var(--color-cyan-40); --glow-amber-sm: 0 0 8px var(--color-amber-30); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 6px rgba(0, 0, 0, 0.3); --shadow-terminal: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 1px var(--color-green-20); /* ------------------------------------------------------- TRANSITIONS ------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 600ms; --duration-slower: 900ms; --duration-slowest: 1200ms; --transition-fast: var(--duration-fast) var(--ease-out); --transition-normal: var(--duration-normal) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); /* ------------------------------------------------------- Z-INDEX LAYERS ------------------------------------------------------- */ --z-negative: -1; --z-bg: -10; --z-canvas: -5; --z-base: 0; --z-raised: 1; --z-content: 10; --z-overlay: 50; --z-nav: 100; --z-dropdown: 200; --z-tooltip: 300; --z-modal: 1000; --z-toast: 2000; /* ------------------------------------------------------- LAYOUT ------------------------------------------------------- */ --max-width: 1200px; --content-width: 900px; --narrow-width: 680px; --section-padding-y: var(--space-24); --section-padding-x: var(--space-8); /* Nav height — used for scroll-margin offsets */ --nav-height: 64px; }