/* ───────────────────────────────────────────────────────────────────────── * deepkold.com · tokens.css — DARK AURORA (final UI pass) * Dark glass + holographic / iridescent (弥散渐变) accents, disciplined into * 3 occasion gradient families (Awake · Calm · Pure). All consumer-facing UI * reads from these tokens; core.css + aurora.css consume them. * 2026-05-30 · v2.0 — replaces Vivid Atmosphere light theme. * ───────────────────────────────────────────────────────────────────────── */ :root { /* ── SUBSTRATE (dark) ──────────────────────────────────────── */ --dvx-paper: #0B1120; /* primary page background (base) */ --dvx-paper-deep: #141C32; /* nested solid surfaces / drawers */ --dvx-paper-warm: #19223C; /* warmer alt solid surface */ --dvx-surf-solid: #1B2542; /* opaque card / panel fallback */ /* page-wide dark aurora wash (used as fixed background by aurora.css) */ --dvx-page-bg: radial-gradient(130% 88% at 50% -8%, #18223E 0%, #101A33 38%, #0B1120 100%); /* ── INK SCALE (light on dark) ─────────────────────────────── */ --dvx-ink: #EEF2FB; /* primary text · chrome */ --dvx-ink-2: #AAB6CE; /* body text */ --dvx-ink-3: #71809C; /* muted / labels */ --dvx-ink-4: #5A6781; /* very muted */ --dvx-hair: rgba(255, 255, 255, 0.08); /* hairline borders */ --dvx-hair-2: rgba(255, 255, 255, 0.14); /* stronger hairlines */ --dvx-on-accent: #06131C; /* ink colour to sit ON the holo gradient / bright accents */ /* ── GLASS (cards, panels, sticky chrome) — dark translucent ─ */ --dvx-glass: rgba(255, 255, 255, 0.065); --dvx-glass-deep: rgba(255, 255, 255, 0.095); --dvx-glass-edge: rgba(255, 255, 255, 0.13); --dvx-glass-grad: linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.04)); --dvx-glass-blur: blur(16px) saturate(150%); --dvx-glass-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 48px -34px rgba(0,0,0,.6); /* ── HOLOGRAPHIC MASTER GRADIENT (text / CTA / mark / accents) ─ */ --dvx-holo: linear-gradient(110deg,#8BF7C0 0%,#74D7FF 30%,#C7A6FF 62%,#FFB0D6 100%); /* ── OCCASION ACCENTS (Awake · Calm · Pure) ─────────────────── */ --dvx-awake: #4FD6E0; /* daytime · cool & energizing */ --dvx-calm: #AC9DF8; /* evening · wind-down */ --dvx-pure: #54D69B; /* all-day · pure flavor */ /* vivid occasion gradient families — dark fills / glows / chips */ --dvx-awake-holo: linear-gradient(135deg,#8BF7C0 0%,#74D7FF 45%,#C7A6FF 80%,#FFB0D6 100%); --dvx-calm-holo: linear-gradient(135deg,#B0A3F7 0%,#9A82EC 45%,#C79EE8 78%,#AFBDF6 100%); --dvx-pure-holo: linear-gradient(135deg,#A6F2DC 0%,#8FE3F0 48%,#BCDCFF 100%); /* LIGHT pastel TILE gradients — backdrops for light-bg product PNGs */ --dvx-awake-tile: linear-gradient(150deg,#D9F7EE,#CFEAFF 60%,#E0E2FF); --dvx-calm-tile: linear-gradient(150deg,#ECE3FB,#EEDDF4 55%,#E2E6FC); --dvx-pure-tile: linear-gradient(150deg,#DEF6E8,#D6F0EE 55%,#E6F1FF); /* ink colours that read on the light occasion tiles */ --dvx-tile-ink: #16213A; --dvx-tile-ink-2: #566177; --dvx-tile-ink-3: #8089A0; --dvx-awake-ink: #1693A8; --dvx-calm-ink: #6A50D4; --dvx-pure-ink: #1B9E6A; /* ── DIFFUSE CHROMA (atmosphere blobs only) ─────────────────── */ --dvx-c-mint: #35E0C2; --dvx-c-cyan: #4FA8FF; --dvx-c-sky: #56B8FF; --dvx-c-lavender: #7C6AF0; --dvx-c-magenta: #C79CFF; --dvx-c-rose: #FF9ECB; --dvx-c-amber: #FFD11A; --dvx-c-peach: #FF8533; --dvx-c-lime: #C2F23A; /* ── FLAVOR FAMILY HUES ─────────────────────────────────────── */ --dvx-f-iced: #74D7FF; --dvx-f-sour: #C2F23A; --dvx-f-mint: #54D69B; --dvx-f-tropical: #F4A65B; --dvx-f-berry: #FF6FA8; --dvx-f-peach: #F4A65B; --dvx-f-sig: #C7A6FF; --dvx-f-iced-deep: #BEE6FF; --dvx-f-sour-deep: #E9F6A8; --dvx-f-mint-deep: #A6F2DC; --dvx-f-tropical-deep: #F9D2A6; --dvx-f-berry-deep: #FFC2DA; --dvx-f-peach-deep: #F9D2A6; --dvx-f-sig-deep: #E2D2FF; /* ── SIGNAL (functional) ────────────────────────────────────── */ --dvx-signal-ok: #54D69B; --dvx-signal-warn: #F4B43A; --dvx-signal-err: #FF6B6B; --dvx-signal-info: #4FA8FF; --dvx-red: #FF6B6B; /* ── LEGACY aliases (dojo-era inline styles in my-account / checkout / livechat) ─ These were undefined after the Dark Aurora rebuild; mapped to aurora values so the inherited account/checkout tab + accent inline styles render on-brand. */ --dvx-paper-2: rgba(255,255,255,0.06); /* inactive tab / nested surface */ --dvx-yellow: #4FD6E0; /* dojo accent → Awake cyan */ --dvx-accent: #4FD6E0; /* ── TYPE STACKS ───────────────────────────────────────────── */ --dvx-font-display: "Sora", "Albert Sans", system-ui, sans-serif; --dvx-font-body: "Albert Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --dvx-font-serif: "Instrument Serif", "Newsreader", serif; --dvx-font-mono: "Space Mono", "JetBrains Mono", ui-monospace, monospace; /* ── TYPE SCALE ────────────────────────────────────────────── */ --dvx-fs-h1-xl: 96px; --dvx-fs-h1: 64px; --dvx-fs-h2: 40px; --dvx-fs-h3: 26px; --dvx-fs-h4: 20px; --dvx-fs-lead: 18px; --dvx-fs-body: 15px; --dvx-fs-small: 12px; --dvx-fs-micro: 11px; --dvx-fs-mono-sm: 10px; /* ── LINE HEIGHTS ──────────────────────────────────────────── */ --dvx-lh-tight: 1.06; --dvx-lh-snug: 1.2; --dvx-lh-body: 1.55; --dvx-lh-loose: 1.7; /* ── TRACKING ──────────────────────────────────────────────── */ --dvx-tr-display: -0.03em; --dvx-tr-body: -0.005em; --dvx-tr-mono: 0.12em; /* ── RADII ─────────────────────────────────────────────────── */ --dvx-r-xs: 8px; --dvx-r-sm: 12px; --dvx-r-md: 16px; --dvx-r-lg: 22px; --dvx-r-xl: 28px; --dvx-r-pill: 999px; /* ── SPACING SCALE ─────────────────────────────────────────── */ --dvx-s-1: 4px; --dvx-s-2: 8px; --dvx-s-3: 12px; --dvx-s-4: 16px; --dvx-s-5: 20px; --dvx-s-6: 24px; --dvx-s-8: 32px; --dvx-s-10: 40px; --dvx-s-12: 48px; --dvx-s-16: 64px; --dvx-s-20: 80px; /* ── LAYOUT WIDTHS ─────────────────────────────────────────── */ --dvx-max-w: 1200px; --dvx-max-w-nb: 900px; --dvx-pad-x: 40px; --dvx-pad-x-md: 32px; --dvx-pad-x-sm: 20px; /* ── ELEVATION ─────────────────────────────────────────────── */ --dvx-elev-1: 0 1px 2px rgba(0,0,0,.3); --dvx-elev-2: 0 12px 30px -14px rgba(0,0,0,.55); --dvx-elev-3: 0 24px 60px -22px rgba(0,0,0,.65); /* ── MOTION ────────────────────────────────────────────────── */ --dvx-ease: cubic-bezier(.2, .8, .25, 1); --dvx-ease-out: cubic-bezier(.16, 1, .3, 1); --dvx-dur-fast: 120ms; --dvx-dur-base: 200ms; --dvx-dur-slow: 320ms; /* ── Z-LAYERS ──────────────────────────────────────────────── */ --dvx-z-base: 0; --dvx-z-sticky: 10; --dvx-z-overlay: 20; --dvx-z-modal: 40; --dvx-z-toast: 60; } /* ── reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--dvx-paper); } body { margin: 0; background: transparent; color: var(--dvx-ink); font: 420 var(--dvx-fs-body) / var(--dvx-lh-body) var(--dvx-font-body); letter-spacing: var(--dvx-tr-body); -webkit-font-smoothing: antialiased; } /* ── breakpoints (reference): 375 mobile · 768 tablet · 1024 desktop · 1280 canonical ── */