/** * variables.css - Design Tokens * * NEON-SOUL visual identity tokens. * Defines colors, typography, spacing, and effects. * * Color palette: Electric cyan primary, deep purple secondary, near-black background * Typography: Space Grotesk (headlines), Inter (body), JetBrains Mono (code) */ /* ========================================================================== SELF-HOSTED FONTS (OFL License) ========================================================================== */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ========================================================================== COLOR PALETTE ========================================================================== */ /* Primary - Electric cyan for CTAs, links, highlights */ --color-primary: #00f0ff; --color-primary-dim: #00d4e0; --color-primary-glow: rgba(0, 240, 255, 0.4); /* Secondary - Deep purple for accents, gradients */ --color-secondary: #8b5cf6; --color-secondary-dim: #7c3aed; --color-secondary-glow: rgba(139, 92, 246, 0.4); /* Background - Near-black page background */ --color-bg: #0a0a0f; --color-bg-elevated: #12121a; --color-bg-surface: #1a1a24; /* Borders */ --color-border: rgba(255, 255, 255, 0.1); /* Text - Soft white for readability */ --color-text: #f0f0f5; --color-text-muted: #a0a0b0; --color-text-dim: #606070; /* Accent - Warm neon for emphasis, alerts */ --color-accent: #ff6b6b; --color-accent-dim: #e05555; --color-accent-glow: rgba(255, 107, 107, 0.4); /* Agentic skill categories - user journey colors */ --color-start-here: #10b981; /* Green - entry point */ --color-next-step: #3b82f6; /* Blue - progression */ --color-supporting: #8b5cf6; /* Purple - helpers */ --color-lifecycle: #f59e0b; /* Amber - management */ --color-advanced: #6b7280; /* Gray - power users */ /* Creative skill categories */ --color-create: #ec4899; /* Pink - original creation */ --color-transform: #f97316; /* Orange - transformation */ --color-combine: #14b8a6; /* Teal - combination */ /* Code/technical backgrounds */ --color-code-bg: rgba(255, 255, 255, 0.05); /* ========================================================================== TYPOGRAPHY ========================================================================== */ /* Font Families */ --font-headline: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Font Sizes - Modular scale (1.25 ratio) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ --text-6xl: 4.5rem; /* 72px */ /* Font Weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Heights */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.75; /* ========================================================================== SPACING SCALE ========================================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 8rem; /* 128px */ /* ========================================================================== GLOW & SHADOW EFFECTS ========================================================================== */ /* Neon glow effects */ --glow-primary: 0 0 10px var(--color-primary-glow), 0 0 20px var(--color-primary-glow), 0 0 40px var(--color-primary-glow); --glow-secondary: 0 0 10px var(--color-secondary-glow), 0 0 20px var(--color-secondary-glow), 0 0 40px var(--color-secondary-glow); --glow-accent: 0 0 10px var(--color-accent-glow), 0 0 20px var(--color-accent-glow); /* Text glow (subtler for readability) */ --text-glow-primary: 0 0 8px var(--color-primary-glow), 0 0 16px var(--color-primary-glow); --text-glow-secondary: 0 0 8px var(--color-secondary-glow); /* Subtle shadows for depth */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* ========================================================================== RESPONSIVE BREAKPOINTS ========================================================================== */ /* Used with @media (min-width: ...) */ --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; /* ========================================================================== LAYOUT ========================================================================== */ --container-max: 1200px; --container-narrow: 800px; --border-radius: 8px; --border-radius-lg: 16px; /* ========================================================================== TRANSITIONS ========================================================================== */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; }