/* ============================================================ uniheaven theme.css - DESIGN TOKENS ONLY ยท cyberangel / y2k ============================================================ Every color, gradient, glow, font, spacing and shape used in the app is defined HERE as a CSS custom property. Components in layout.css only ever reference var(--...). THEMES :root = "angel" (light, pearl + ice blue) - default [data-theme="dark"] = "cyber" (night, indigo + chrome glow) PROJECT RULES (see STYLE.md) - Gradients are allowed, but ONLY as tokens defined here (--grad-*). layout.css never writes a raw gradient color. - NO inline styles in HTML/TS. Only these tokens + classes. - NO glitch / scanline / CRT effects. Motion = hover transitions. ============================================================ */ :root { /* -- palette: angel (light) ------------------------------ */ --bg: #eef3fb; /* pale ice (page, under the sky gradient) */ --bg-panel: #fbfcff; /* pearl white: cards, panels, sidebar */ --bg-inset: #ffffff; /* inputs, wells */ --bg-hover: #e4edfb; --bg-active: #d3e2f8; --text: #151a3a; /* deep indigo ink */ --text-dim: #4a5578; --text-faint: #7580a0; --accent: #2a5bd7; /* chrome cobalt */ --accent-dim: #1b44b0; --accent-soft:#e1ebfc; --accent-ice: #9cc4f5; /* ice blue: ornaments, hairlines */ --accent-lav: #b9b3f0; /* lavender haze (ps2 ad) */ --border: #c3d1ea; --ok: #1a7f4f; --danger: #cf2244; --warn: #9a6700; --code-bg: #eaf0fa; --ink: #0d1030; /* "black" label tabs (spec table) */ --on-ink: #f4f8ff; --on-accent: #ffffff; --diff-add-bg: rgba(26, 127, 79, 0.12); --diff-del-bg: rgba(207, 34, 68, 0.12); /* -- gradients (chrome, sky, glow) ------------------------ */ --grad-sky: linear-gradient(180deg, #f9fbff 0%, #eaf1fc 55%, #dfe9f9 100%); --grad-chrome: linear-gradient(180deg, #ffffff 0%, #e8eef8 48%, #c9d6ec 52%, #eef3fb 100%); --grad-chrome-hover: linear-gradient(180deg, #ffffff 0%, #dbe8fb 48%, #b3c9ee 52%, #e6effc 100%); --grad-accent: linear-gradient(180deg, #5b8cf0 0%, #2a5bd7 50%, #1b44b0 52%, #3a6ae0 100%); --grad-accent-hover: linear-gradient(180deg, #78a0f5 0%, #3a6ae0 50%, #2a5bd7 52%, #4d7be8 100%); --grad-title: linear-gradient(90deg, #2a5bd7 0%, #6a96ec 55%, #cfe0fa 100%); --grad-panel: linear-gradient(180deg, #ffffff 0%, #f3f7fe 100%); --grad-select: linear-gradient(90deg, #dbe8fb 0%, #eef4fe 100%); --grad-rule: linear-gradient(90deg, #2a5bd7 0%, #9cc4f5 45%, rgba(156, 196, 245, 0) 100%); --grad-chrome-text: linear-gradient(180deg, #7aa3ee 0%, #ffffff 46%, #a9c3ee 52%, #5b82d6 100%); --grad-bar: linear-gradient(180deg, #9cc4f5 0%, #2a5bd7 100%); --grad-bar-hot:linear-gradient(180deg, #b9b3f0 0%, #2a5bd7 100%); /* lens flare in the page corner + faint lavender haze */ --flare: radial-gradient(circle at 88% 6%, rgba(255,255,255,0.95) 0, rgba(190,215,250,0.65) 8%, rgba(190,215,250,0) 38%), radial-gradient(circle at 8% 92%, rgba(185,179,240,0.35) 0, rgba(185,179,240,0) 40%); --halftone: rgba(42, 91, 215, 0.22); /* dot color of the halftone fade */ /* -- glow / depth ----------------------------------------- */ --glow: 0 0 0 1px rgba(42, 91, 215, 0.28), 0 4px 18px rgba(42, 91, 215, 0.22); --glow-soft: 0 2px 10px rgba(42, 91, 215, 0.14); --focus-ring: 0 0 0 3px rgba(42, 91, 215, 0.28); --bevel: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(42, 91, 215, 0.12); --scrim: rgba(18, 28, 70, 0.42); --flare-star: #7fa8ee; /* -- shape & motion --------------------------------------- */ --radius: 2px; /* panels, inputs: nearly sharp */ --radius-pill:999px; /* buttons, tags, badges: y2k capsules */ --border-w: 1px; --transition: 140ms ease; --max-w: 920px; --topbar-h: 49px; /* -- spacing scale ----------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; /* -- typography --------------------------------------------- No webfont is bundled (the app must work offline). The stacks below use fonts every OS ships; to go further drop a woff2 in web/vendor/fonts/ and enable the @font-face block at the end of this comment (see STYLE.md "fonts"). display: Arial Black / Impact italic (heavy, ad-poster) ui: MS Gothic / Osaka-Mono (pixel-ish japanese ui) body: Tahoma / Verdana (classic y2k web) */ --font-display: "Michroma", "Arial Black", "Helvetica Neue", Impact, sans-serif; --font-ui: "DotGothic16", "MS Gothic", "MS PGothic", "Osaka-Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --font-body: Tahoma, Verdana, Geneva, "DejaVu Sans", system-ui, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", monospace; --fs-xs: 11px; --fs-s: 13px; --fs-m: 14px; --fs-l: 18px; --fs-xl: 26px; --fs-display: 40px; /* page headings (display font) */ --lh: 1.6; /* -- ornaments (svg data-uri masks, colored by background) --- thorn: symmetric cyber-sigil / wing mark sparkle: 4-point star halo: tilted ring */ --orn-thorn: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 160 64%27%3E%3Cg fill=%27%23000%27%3E%3Cpath d=%27M78 30 C66 22 40 24 6 6 C34 20 56 30 78 33 Z%27/%3E%3Cpath d=%27M78 33 C60 31 36 36 2 34 C34 31 58 31 78 31 Z%27/%3E%3Cpath d=%27M78 34 C62 40 40 52 10 60 C38 50 58 42 78 36 Z%27/%3E%3Cpath d=%27M74 29 C66 18 56 8 44 0 C54 10 64 20 76 31 Z%27/%3E%3Cpath d=%27M72 36 C66 44 62 54 56 64 C66 54 72 46 77 37 Z%27/%3E%3Cpath d=%27M70 32 C54 27 34 20 20 14 C36 24 54 32 70 33 Z%27/%3E%3Cg transform=%27translate(160 0) scale(-1 1)%27%3E%3Cpath d=%27M78 30 C66 22 40 24 6 6 C34 20 56 30 78 33 Z%27/%3E%3Cpath d=%27M78 33 C60 31 36 36 2 34 C34 31 58 31 78 31 Z%27/%3E%3Cpath d=%27M78 34 C62 40 40 52 10 60 C38 50 58 42 78 36 Z%27/%3E%3Cpath d=%27M74 29 C66 18 56 8 44 0 C54 10 64 20 76 31 Z%27/%3E%3Cpath d=%27M72 36 C66 44 62 54 56 64 C66 54 72 46 77 37 Z%27/%3E%3Cpath d=%27M70 32 C54 27 34 20 20 14 C36 24 54 32 70 33 Z%27/%3E%3C/g%3E%3Cpath d=%27M80 18 L85 32 L80 46 L75 32Z%27/%3E%3C/g%3E%3C/svg%3E"); --orn-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E"); --orn-halo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'%3E%3Cellipse cx='32' cy='12' rx='28' ry='7' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); } [data-theme="dark"] { /* -- palette: cyber (night) ------------------------------- */ --bg: #090c1f; --bg-panel: #11163a; --bg-inset: #0a0e27; --bg-hover: #1a2150; --bg-active: #263070; --text: #e8f0ff; --text-dim: #a3b3da; --text-faint: #6d7cab; --accent: #8fc2ff; /* ice blue glow */ --accent-dim: #4f86f0; --accent-soft:#18224f; --accent-ice: #5f8fe0; --accent-lav: #8f86e6; --border: #2b3977; --ok: #55d6a0; --danger: #ff6b8b; --warn: #e6b84d; --code-bg: #0a0e27; --ink: #e8f0ff; /* inverted: light label tabs */ --on-ink: #0d1030; --on-accent: #050a24; --diff-add-bg: rgba(85, 214, 160, 0.14); --diff-del-bg: rgba(255, 107, 139, 0.14); --grad-sky: linear-gradient(180deg, #0c1030 0%, #090c1f 60%, #070a19 100%); --grad-chrome: linear-gradient(180deg, #2a3678 0%, #172052 48%, #0f1640 52%, #1b2560 100%); --grad-chrome-hover: linear-gradient(180deg, #3a49a0 0%, #22307a 48%, #18225a 52%, #29368a 100%); --grad-accent: linear-gradient(180deg, #c4e0ff 0%, #8fc2ff 50%, #5f9af0 52%, #9cc8ff 100%); --grad-accent-hover: linear-gradient(180deg, #e0efff 0%, #b0d4ff 50%, #7fb2f8 52%, #b8d8ff 100%); --grad-title: linear-gradient(90deg, #4f86f0 0%, #2b3977 60%, #11163a 100%); --grad-panel: linear-gradient(180deg, #151b45 0%, #0f1438 100%); --grad-select: linear-gradient(90deg, #1d2a6a 0%, #151d4f 100%); --grad-rule: linear-gradient(90deg, #8fc2ff 0%, #4f86f0 45%, rgba(79, 134, 240, 0) 100%); --grad-chrome-text: linear-gradient(180deg, #8fb4f5 0%, #ffffff 46%, #b9ceff 52%, #6d8fe0 100%); --grad-bar: linear-gradient(180deg, #8fc2ff 0%, #3b5fd0 100%); --grad-bar-hot:linear-gradient(180deg, #c9b8ff 0%, #4f86f0 100%); --flare: radial-gradient(circle at 88% 6%, rgba(143,194,255,0.40) 0, rgba(79,134,240,0.16) 10%, rgba(79,134,240,0) 40%), radial-gradient(circle at 8% 92%, rgba(143,134,230,0.22) 0, rgba(143,134,230,0) 42%); --halftone: rgba(143, 194, 255, 0.20); --glow: 0 0 0 1px rgba(143, 194, 255, 0.35), 0 0 22px rgba(79, 134, 240, 0.35); --glow-soft: 0 0 12px rgba(79, 134, 240, 0.25); --focus-ring: 0 0 0 3px rgba(143, 194, 255, 0.30); --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.35); --scrim: rgba(2, 4, 16, 0.65); --flare-star: #dcecff; } /* KaTeX inherits the current text color and font sizes; these rules only need to keep it readable in both themes. */ .katex { font-size: 1.06em; color: var(--text); } .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; } /* Optional self-hosted fonts (uncomment after adding the files): @font-face { font-family: "DotGothic16"; src: url("/vendor/fonts/DotGothic16-Regular.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Michroma"; src: url("/vendor/fonts/Michroma-Regular.woff2") format("woff2"); font-display: swap; } */