/** * variables.css * ───────────────────────────────────────────────────────────────── * PRD Section 2: Design Language — CSS Custom Properties * * Load order: variables.css → base.css → layout.css → components.css → animations.css * * Theme is applied via [data-theme="..."] on . * The inline script sets data-theme from localStorage BEFORE * this file loads — no FOUC. * * ❌ DO NOT use generic AI-pattern values here (e.g., #667eea, #764ba2). * ✅ Every value is deliberate and specific to the technical aesthetic. */ /* ───────────────────────────────────────────── SHARED DESIGN TOKENS (theme-independent) ───────────────────────────────────────────── */ :root { /* ── Easing (PRD 2.7: all transitions use this) ── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1); /* ── Transition durations ── */ --dur-fast: 180ms; --dur-normal: 340ms; --dur-slow: 600ms; --dur-crawl: 1000ms; /* ── Typography scale (PRD 2.1: all fluid via clamp) ── */ --text-display: clamp(3rem, 10vw, 9rem); /* Hero title — must dominate */ --text-display-sm: clamp(2rem, 5.5vw, 5.5rem); /* Section hero titles */ --text-h1: clamp(1.75rem, 4vw, 3.25rem); --text-h2: clamp(1.375rem, 2.5vw, 2.125rem); --text-h3: clamp(1.125rem, 1.75vw, 1.5rem); --text-body: clamp(0.9375rem, 1.1vw, 1rem); /* 15–16px */ --text-small: clamp(0.8125rem, 0.9vw, 0.875rem);/* 13–14px */ --text-meta: clamp(0.625rem, 0.8vw, 0.6875rem);/* 10–11px — metadata */ --text-label: 0.6875rem; /* Accent labels, uppercase */ /* ── Font families ── */ --font-display: "Space Grotesk", "Noto Sans KR", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", "Noto Sans KR", monospace; --font-body: "DM Sans", "Noto Sans KR", system-ui, sans-serif; /* ── Font feature settings (PRD 2.1) ── */ --font-features-display: "ss01", "cv01"; --font-features-mono: "liga" 1, "calt" 1; /* ── Letter spacing ── */ --tracking-label: 0.15em; /* PRD 2.1: Accent labels */ --tracking-wide: 0.08em; --tracking-tight: -0.02em; /* Display headings */ /* ── Layout ── */ --content-max: 1440px; --content-wide: 1280px; --content-narrow: 720px; --section-pad-v: clamp(4rem, 8vw, 10rem); /* PRD 2.3 */ --section-pad-h: clamp(1.25rem, 5vw, 5rem); --nav-height: clamp(3.5rem, 5vw, 4.5rem); /* ── Spacing scale ── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* ── Border radius ── */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 9999px; /* ── Z-index layers ── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-nav: 300; --z-overlay: 400; --z-modal: 500; --z-cursor: 20000; /* keep custom cursor above zoom modal */ --z-grain: 9999; /* ── Touch target minimum (PRD 4.5: 44×44px) ── */ --touch-min: 44px; /* ── Focus ring (PRD 4.5: 2px accent, 3px offset) ── */ --focus-ring: 2px solid var(--accent); --focus-ring-offset: 3px; /* ── Card / Surface ── */ --card-border: 1px solid rgba(255, 255, 255, 0.06); --card-border-hover: 0 0 0 1px var(--accent); /* PRD 2.7 */ --card-pad: clamp(1.25rem, 3vw, 2rem); } /* ───────────────────────────────────────────── THEME 1: Dark Cyber (Default) PRD 2.2 — Deep space, cold precise cyber-blue ───────────────────────────────────────────── */ [data-theme="dark-cyber"] { --bg-base: #07090f; --bg-surface: #0d1117; --bg-elevated: #161b22; --bg-overlay: #161b22; --text-primary: #e6edf3; --text-secondary: #8b949e; --text-tertiary: #3a4560; --accent: #00d4ff; --accent-glow: 0 0 20px rgba(0, 212, 255, 0.4); /* full box-shadow */ --accent-glow-bg: rgba(0, 212, 255, 0.08); /* subtle bg tint */ --accent-alt: #ff4d6d; --accent-rgb: 0, 212, 255; --accent-alt-rgb: 255, 77, 109; --border: rgba(0, 212, 255, 0.15); --tag-bg: rgba(0, 212, 255, 0.08); --grain-opacity: 0.035; --scrollbar-track: #0d1117; --scrollbar-thumb: #1e2a40; --scrollbar-hover: #00d4ff; --selection-bg: rgba(0, 212, 255, 0.2); --selection-text: #e6edf3; } /* ───────────────────────────────────────────── THEME 2: Terminal Green PRD 2.2 — Linux console, softer phosphor green (not neon) ───────────────────────────────────────────── */ [data-theme="terminal-green"] { --bg-base: #020c02; --bg-surface: #061006; --bg-elevated: #0a1a0a; --bg-overlay: #0a1a0a; --text-primary: #a8c8a8; /* softer phosphor — not pure lime */ --text-secondary: #4a6e4a; --text-tertiary: #253525; --accent: #00c853; /* Material Green A700 — easier on eyes */ --accent-glow: 0 0 16px rgba(0, 200, 83, 0.35); --accent-glow-bg: rgba(0, 200, 83, 0.07); --accent-alt: #ffc107; --accent-rgb: 0, 200, 83; --accent-alt-rgb: 255, 193, 7; --border: rgba(0, 200, 83, 0.18); --tag-bg: rgba(0, 200, 83, 0.07); --grain-opacity: 0.045; --scrollbar-track: #061006; --scrollbar-thumb: #1a2e1a; --scrollbar-hover: #00c853; --selection-bg: rgba(0, 200, 83, 0.18); --selection-text: #020c02; } /* ───────────────────────────────────────────── THEME 3: Midnight Purple PRD 2.2 — Deep learning lab, mysterious heavy purple ───────────────────────────────────────────── */ [data-theme="midnight-purple"] { --bg-base: #06030f; --bg-surface: #0e0820; --bg-elevated: #160d2e; --bg-overlay: #160d2e; --text-primary: #e8dff5; --text-secondary: #7c6a99; --text-tertiary: #3a2560; --accent: #bf5fff; --accent-glow: 0 0 20px rgba(191, 95, 255, 0.4); --accent-glow-bg: rgba(191, 95, 255, 0.08); --accent-alt: #f472b6; --accent-rgb: 191, 95, 255; --accent-alt-rgb: 244, 114, 182; --border: rgba(191, 95, 255, 0.18); --tag-bg: rgba(191, 95, 255, 0.08); --grain-opacity: 0.04; --scrollbar-track: #0e0820; --scrollbar-thumb: #2a1550; --scrollbar-hover: #bf5fff; --selection-bg: rgba(191, 95, 255, 0.2); --selection-text: #e8dff5; } /* ───────────────────────────────────────────── THEME 4: Light Minimal PRD 2.2 — Clean minimal, bright professional white ───────────────────────────────────────────── */ [data-theme="light-minimal"] { --bg-base: #f7f8fc; --bg-surface: #ffffff; --bg-elevated: #eef0f6; --bg-overlay: #eef0f6; --text-primary: #0d1117; --text-secondary: #57606a; --text-tertiary: #b0aa9e; --accent: #0055cc; --accent-glow: 0 2px 12px rgba(0, 85, 204, 0.2); --accent-glow-bg: rgba(0, 85, 204, 0.06); --accent-alt: #dc2626; --accent-rgb: 0, 85, 204; --accent-alt-rgb: 220, 38, 38; --border: rgba(0, 85, 204, 0.15); --tag-bg: rgba(0, 85, 204, 0.06); --grain-opacity: 0.02; --scrollbar-track: #eef0f6; --scrollbar-thumb: #c8c4bb; --scrollbar-hover: #0055cc; --selection-bg: rgba(0, 85, 204, 0.1); --selection-text: #0d1117; /* Light mode overrides */ --card-border: 1px solid rgba(0, 85, 204, 0.12); } /* ───────────────────────────────────────────── REDUCED MOTION — disable ALL decorative motion for users who opt out ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; --dur-crawl: 0ms; } }