/* ============================================================ ID.AURA — Design tokens (Phase A5 seed / C5 foundation) Additive token layer consumed by css/system.css (and, going forward, new component CSS). Does NOT redeclare the existing :root palette in styles.css (--cyan, --ink, --font-* etc.) — those stay the single source of truth for color/type so this file can be dropped in without any risk of drift/duplication. This file only introduces the tokens that were missing: spacing/radius scale, elevation, motion, hairline stroke, density sizing for the S/M/L card system, and day/night hooks. ============================================================ */ :root { /* ---------- spacing scale (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* ---------- radius scale ---------- */ --r-xs: 2px; --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-full: 999px; /* ---------- hairline stroke (device-pixel-thin borders) ---------- */ --hair: .5px; --stroke-1: var(--hair) solid rgba(150, 190, 210, 0.13); --stroke-2: var(--hair) solid rgba(150, 190, 210, 0.22); /* ---------- elevation (shadow depth scale) ---------- */ --ev-1: 0 1px 2px rgba(0, 0, 0, 0.24); --ev-2: 0 6px 20px rgba(0, 0, 0, 0.28); --ev-3: 0 20px 60px rgba(0, 0, 0, 0.32); --ev-4: 0 36px 100px rgba(0, 0, 0, 0.4); /* ---------- motion (durations + easings; complements --ease-flip/--ease-soft) ---------- */ --dur-fast: .16s; --dur-base: .28s; --dur-slow: .5s; --dur-flip: .62s; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ---------- density: card S/M/L sizing (consumed by system.css + console/layout.js) ---------- */ --density-s-pad: var(--sp-3); --density-m-pad: var(--sp-4); --density-l-pad: var(--sp-5); --density-s-title: 10px; --density-m-title: 13px; --density-l-title: 17px; /* ---------- day/night accent ramps (data-theme="day"|"night" on ) ---------- */ --surface-scrim: rgba(2, 6, 9, 0.66); /* ============================================================ APEX COCKPIT · 光子仪器 (2026-09-05 全栈重写新增) 科幻电影精密仪器感:Tron Legacy × Blade Runner 2049 × Lotus Hyper OS ============================================================ */ /* —— 更深邃的底阶(覆盖 styles.css 默认值)—— */ --bg: #04060b; --bg-2: #080b12; --bg-3: #0d1119; /* —— 光子玻璃材质系统(替代单调的 glass-* 系列)—— */ --photon-bg: linear-gradient(158deg, rgba(18, 26, 34, 0.66) 0%, rgba(8, 12, 18, 0.78) 58%, rgba(3, 5, 9, 0.86) 100%); --photon-bg-strong: linear-gradient(158deg, rgba(22, 32, 42, 0.78) 0%, rgba(10, 15, 22, 0.88) 58%, rgba(4, 6, 11, 0.94) 100%); /* 1px 渐变描边:顶部 60% 白 → 侧底 8% 白(模拟玻璃厚度受光) */ --photon-stroke: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 18%, rgba(255,255,255,0.02) 50%, rgba(84,211,227,0.10) 100%) border-box; --photon-edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08); --photon-edge-lo: inset 0 -1px 0 rgba(0, 0, 0, 0.42); --photon-shadow: var(--photon-edge-hi), var(--photon-edge-lo), 0 1px 0 rgba(84, 211, 227, 0.04), 0 24px 64px -16px rgba(0, 0, 0, 0.66), 0 6px 24px -8px rgba(0, 0, 0, 0.5); --photon-blur: blur(22px) saturate(1.5); /* —— 仪器刻度系统(0.5px 发丝 → 2px 主刻度)—— */ --tick-hair: 0.5px; --tick-mid: 1px; --tick-main: 2px; --tick-color-dim: rgba(150, 184, 196, 0.14); --tick-color-mid: rgba(170, 200, 210, 0.28); --tick-color-hi: rgba(200, 226, 234, 0.52); /* —— 辉光分层(近实远虚:实线 → 柔光 → 体积雾)—— */ --glow-near: 0 0 1px currentColor, 0 0 4px currentColor; --glow-mid: 0 0 2px currentColor, 0 0 12px currentColor, 0 0 32px rgba(84, 211, 227, 0.22); --glow-far: 0 0 4px currentColor, 0 0 24px currentColor, 0 0 72px rgba(84, 211, 227, 0.18), 0 0 140px rgba(84, 211, 227, 0.08); /* —— 电影调色板(更深邃 + 单主色 + 灰阶拉开)—— */ --ink-0: #f7fafa; --ink-1: #e6edef; --ink-2: #b8c6cb; --ink-3: #8fa0a6; --ink-4: #64747b; --ink-5: #48555c; --ink-6: #303a41; --ink-7: #1c2329; /* —— 模式色相(用于 hue-rotate 微调,而非全换色)—— */ --mode-hue-pure: 190deg; --mode-hue-drive: 195deg; --mode-hue-energy: 155deg; --mode-hue-gt: 12deg; /* —— 噪点 / 扫描线强度 —— */ --grain-opacity: 0.028; --scanline-opacity: 0.018; --chroma-opacity: 0.05; /* —— 仪器数字字级 —— */ --digit-hero: 96px; --digit-l: 48px; --digit-m: 24px; --digit-s: 13px; --digit-xs: 10px; } /* Night is the default aesthetic for this concept (see styles.css); the token layer still declares an explicit day ramp so B6 (day/night swap) has somewhere real to attach without inventing new variable names. */ body[data-theme="day"] { --surface-scrim: rgba(210, 222, 228, 0.5); } /* ============================================================ APEX · Photon Glass primitive(可复用类) ============================================================ */ .photon-glass { position: relative; background: var(--photon-bg); backdrop-filter: var(--photon-blur); -webkit-backdrop-filter: var(--photon-blur); border-radius: var(--r-md); box-shadow: var(--photon-shadow); overflow: hidden; isolation: isolate; } /* 渐变描边(用伪元素代替 border,以便支持渐变) */ .photon-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 16%, rgba(150, 190, 210, 0.04) 50%, rgba(84, 211, 227, 0.14) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 1; } /* 微噪点纹理 */ .photon-glass::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 140px 140px; opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } /* 仪器读数(精密数字的统一样式) */ .instr-digit { font-family: var(--font-tech); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-0); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .instr-label { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); } .instr-unit { font-family: var(--font-geo); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-3); }