/* ============================================================ * HOVER theme · design tokens * The visual language of auto.hoverk.com (Auto-System, skin 「晶」 = iOS liquid glass), ported to * Sub2API. Light values live on :root, dark values on html.dark (Sub2API toggles the `dark` class). * Every token is prefixed --hv- so nothing collides with upstream or third-party variables. * * Principles carried over from Auto: * - colour only carries status semantics; everything else is ink on soft glass; * - primary buttons are matte ink (nearly flat, fine grain, no highlight band); * - inputs are wells carved into the glass that light up from within on focus; * - content panels do not blur what is behind them (the scene is already soft, and blur costs * frames while scrolling); only things that float over content (nav, popovers, dialogs, * toasts) use real backdrop blur. * ============================================================ */ :root { color-scheme: light; --hv-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif; --hv-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace; /* Scene: soft blobs on a cool grey, plus a faint grain */ --hv-bg: #eef0f4; --hv-blob-1: rgba(197, 205, 222, 0.85); --hv-blob-2: rgba(228, 219, 208, 0.78); --hv-blob-3: rgba(204, 215, 229, 0.8); --hv-scene: radial-gradient(44% 38% at 10% 4%, var(--hv-blob-1), transparent 70%), radial-gradient(36% 34% at 94% 12%, var(--hv-blob-2), transparent 72%), radial-gradient(48% 42% at 74% 100%, var(--hv-blob-3), transparent 72%), radial-gradient(30% 30% at 24% 92%, var(--hv-blob-2), transparent 70%); --hv-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --hv-grain-opacity: 0.045; --hv-grain-blend: multiply; /* Text and lines */ --hv-text: #1c2024; --hv-text-2: #585d66; --hv-text-3: #80858f; --hv-link: #0d63b8; --hv-line: rgba(28, 32, 36, 0.09); --hv-line-soft: rgba(28, 32, 36, 0.06); --hv-line-strong: rgba(28, 32, 36, 0.22); --hv-hover: rgba(28, 32, 36, 0.05); --hv-hover-strong: rgba(28, 32, 36, 0.085); --hv-focus-ring: rgba(28, 32, 36, 0.55); --hv-selection-bg: #1c2024; --hv-selection-fg: #ffffff; --hv-scroll-thumb: rgba(28, 32, 36, 0.18); --hv-scroll-thumb-hover: rgba(28, 32, 36, 0.34); --hv-code-bg: rgba(28, 32, 36, 0.055); --hv-code-fg: #2b3037; --hv-brand-line-rgb: 28, 32, 36; /* Status semantics (the only colour in the UI) */ --hv-success: #127b3c; --hv-success-strong: #1aa251; --hv-success-soft: rgba(26, 162, 81, 0.12); --hv-success-line: rgba(26, 162, 81, 0.28); --hv-error: #c4262c; --hv-error-strong: #e5484d; --hv-error-soft: rgba(206, 44, 49, 0.1); --hv-error-line: rgba(206, 44, 49, 0.26); --hv-warning: #8a5d0c; --hv-warning-strong: #e2a336; --hv-warning-soft: rgba(214, 158, 46, 0.16); --hv-warning-line: rgba(186, 135, 30, 0.3); --hv-info: #0d63b8; --hv-info-strong: #3b8fe3; --hv-info-soft: rgba(13, 116, 206, 0.1); --hv-info-line: rgba(13, 116, 206, 0.26); /* Glass surfaces: the two-corner highlight rim and the panel faces */ --hv-rim: linear-gradient(140deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 26%, rgba(128, 142, 170, 0.26) 58%, rgba(255, 255, 255, 0.92) 100%); --hv-gap: 18px; --hv-panel-radius: 22px; --hv-panel-bg: linear-gradient(168deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.58) 48%, rgba(255, 255, 255, 0.66) 100%); --hv-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -22px 40px -30px rgba(72, 88, 124, 0.14), 0 1px 1px rgba(16, 20, 28, 0.03), 0 8px 16px -8px rgba(16, 20, 28, 0.07), 0 28px 48px -28px rgba(16, 20, 28, 0.2); --hv-stat-radius: 20px; --hv-stat-bg: linear-gradient(168deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.6) 100%); --hv-stat-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -18px 30px -24px rgba(72, 88, 124, 0.13), 0 1px 1px rgba(16, 20, 28, 0.03), 0 6px 12px -6px rgba(16, 20, 28, 0.07), 0 20px 36px -24px rgba(16, 20, 28, 0.18); /* Wells: inputs, setting lists, status strips share the "carved into the glass" material */ --hv-well: linear-gradient(180deg, rgba(20, 26, 38, 0.062), rgba(20, 26, 38, 0.026)); --hv-well-shadow: inset 0 1px 2px rgba(16, 20, 28, 0.12), inset 0 0 0 1px rgba(16, 20, 28, 0.035), 0 1px 0 rgba(255, 255, 255, 0.9); --hv-inset-radius: 16px; --hv-inset-bg: linear-gradient(180deg, rgba(20, 26, 38, 0.045), rgba(20, 26, 38, 0.02)); --hv-inset-shadow: inset 0 1px 2px rgba(16, 20, 28, 0.09), inset 0 0 0 1px rgba(16, 20, 28, 0.03), 0 1px 0 rgba(255, 255, 255, 0.85); --hv-list-radius: 16px; --hv-list-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.56)); --hv-list-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(16, 20, 28, 0.055), 0 2px 5px -2px rgba(16, 20, 28, 0.08); /* Fields */ --hv-field-h: 38px; --hv-field-radius: 12px; --hv-field-fill: var(--hv-well); --hv-field-edge: linear-gradient(rgba(16, 20, 28, 0.035), rgba(16, 20, 28, 0.035)); --hv-field-shadow: inset 0 1px 2px rgba(16, 20, 28, 0.12), 0 1px 0 rgba(255, 255, 255, 0.9); --hv-field-fill-hover: linear-gradient(180deg, rgba(20, 26, 38, 0.078), rgba(20, 26, 38, 0.036)); --hv-field-fill-focus: linear-gradient(180deg, rgba(240, 242, 246, 0.94) 0%, rgba(255, 255, 255, 0.99) 58%, #ffffff 100%); --hv-field-edge-focus: linear-gradient(135deg, rgba(28, 32, 36, 0.68) 0%, rgba(28, 32, 36, 0.22) 36%, rgba(28, 32, 36, 0.14) 64%, rgba(28, 32, 36, 0.5) 100%); --hv-field-shadow-focus: inset 0 2px 4px rgba(16, 20, 28, 0.11), inset 0 -1px 0 #ffffff, 0 0 0 4px rgba(255, 255, 255, 0.62), 0 0 18px 4px rgba(255, 255, 255, 0.55); --hv-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23686d77' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --hv-option-bg: #ffffff; /* Switch (iOS green) and checkbox (ink) */ --hv-switch-off: linear-gradient(180deg, rgba(20, 26, 38, 0.16), rgba(20, 26, 38, 0.1)); --hv-switch-off-shadow: inset 0 1px 2px rgba(16, 20, 28, 0.16); --hv-switch-on: linear-gradient(180deg, #2fb865, #25a558); --hv-switch-on-shadow: inset 0 1px 2px rgba(8, 60, 28, 0.28); --hv-switch-knob: #ffffff; --hv-switch-knob-shadow: 0 1px 1px rgba(16, 20, 28, 0.12), 0 2px 5px rgba(16, 20, 28, 0.22); --hv-check-bg: var(--hv-well); --hv-check-shadow: inset 0 1px 2px rgba(16, 20, 28, 0.16), inset 0 0 0 1px rgba(16, 20, 28, 0.1); --hv-check-on: linear-gradient(180deg, #2b2f36, #121417); --hv-check-on-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(10, 12, 16, 0.3); --hv-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); /* Buttons: primary = matte ink, secondary = a small raised glass chip */ --hv-btn-h: 36px; --hv-btn-radius: 12px; --hv-ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --hv-cta: var(--hv-ink-grain) 0 0 / 120px 120px padding-box, linear-gradient(112deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.035) 100%) padding-box, linear-gradient(180deg, #24272d 0%, #131518 100%) padding-box, linear-gradient(180deg, #4b5059 0%, #1a1c20 42%, #000000 100%) border-box; --hv-cta-fg: #f6f7f9; --hv-cta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 1px 1px rgba(10, 12, 16, 0.28), 0 3px 6px -2px rgba(10, 12, 16, 0.24), 0 10px 18px -12px rgba(10, 12, 16, 0.42); --hv-cta-shadow-press: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(10, 12, 16, 0.28); --hv-cta-hover: 1.2; --hv-chip-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.8)); --hv-chip-bg-hover: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.94)); --hv-chip-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(16, 20, 28, 0.075), 0 1px 2px rgba(16, 20, 28, 0.07), 0 3px 6px -3px rgba(16, 20, 28, 0.12); --hv-chip-shadow-hover: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(16, 20, 28, 0.13), 0 2px 4px rgba(16, 20, 28, 0.08), 0 6px 12px -6px rgba(16, 20, 28, 0.18); /* Tables */ --hv-table-radius: 16px; --hv-table-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.58)); --hv-table-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(16, 20, 28, 0.06), 0 2px 5px -2px rgba(16, 20, 28, 0.07); --hv-th-bg: rgba(28, 32, 36, 0.028); --hv-sticky-bg: #f7f8fa; --hv-row-hover: rgba(28, 32, 36, 0.03); --hv-gauge-track: linear-gradient(180deg, rgba(20, 26, 38, 0.12), rgba(20, 26, 38, 0.06)); --hv-gauge-track-shadow: inset 0 1px 1.5px rgba(16, 20, 28, 0.14); --hv-gauge-fill: linear-gradient(180deg, #33373f, #15171b); /* Console: a dark well in both themes */ --hv-console-bg: linear-gradient(180deg, #14161b 0%, #0f1115 100%); --hv-console-fg: #d5d9e0; --hv-console-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.85); /* Floating layers */ --hv-pop-radius: 16px; --hv-pop-bg: rgba(255, 255, 255, 0.78); --hv-pop-blur: blur(26px) saturate(160%); --hv-pop-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(16, 20, 28, 0.07), 0 12px 28px -10px rgba(16, 20, 28, 0.26), 0 32px 60px -32px rgba(16, 20, 28, 0.34); --hv-toast-radius: 16px; /* Sticky section nav / segmented tab bar (Auto --section-nav-*) */ --hv-section-nav-radius: 16px; --hv-section-nav-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(16, 20, 28, 0.06), 0 10px 24px -14px rgba(16, 20, 28, 0.26); --hv-backdrop: rgba(18, 22, 30, 0.3); --hv-backdrop-blur: blur(8px) saturate(120%); --hv-dialog-radius: 24px; --hv-dialog-bg: linear-gradient(168deg, rgba(255, 255, 255, 0.94), rgba(250, 251, 253, 0.88)); --hv-dialog-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(16, 20, 28, 0.06), 0 24px 48px -16px rgba(16, 20, 28, 0.34), 0 64px 120px -48px rgba(16, 20, 28, 0.46); /* Shell: floating glass navigation */ --hv-side-radius: 26px; --hv-side-inset: 14px; --hv-side-bg: linear-gradient(172deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.52) 100%); --hv-side-blur: blur(28px) saturate(150%); --hv-side-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -30px 50px -36px rgba(72, 88, 124, 0.16), 0 1px 1px rgba(16, 20, 28, 0.03), 0 10px 20px -10px rgba(16, 20, 28, 0.1), 0 36px 64px -32px rgba(16, 20, 28, 0.26); --hv-nav-radius: 12px; --hv-nav-active-fg: #f6f7f9; --hv-top-bg: rgba(255, 255, 255, 0.62); --hv-top-blur: blur(24px) saturate(160%); --hv-drawer-bg: rgba(248, 249, 251, 0.86); --hv-glass-border: rgba(255, 255, 255, 0.82); --hv-glass-hi: rgba(255, 255, 255, 0.9); --hv-nav-bg: rgba(255, 255, 255, 0.55); /* Front-page 「晶」 crystal card (used sparingly for hero surfaces) */ --hv-card-aura: radial-gradient(36% 30% at 86% 92%, rgba(52, 64, 96, 0.32), transparent 72%), radial-gradient(30% 28% at 2% 0%, rgba(255, 255, 255, 1), transparent 70%), radial-gradient(24% 24% at 100% 4%, rgba(208, 190, 166, 0.42), transparent 72%); --hv-card-face: linear-gradient(168deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.58) 46%, rgba(255, 255, 255, 0.66) 100%); --hv-card-rim: linear-gradient(140deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 26%, rgba(150, 162, 186, 0.3) 58%, rgba(255, 255, 255, 0.95) 100%); --hv-card-depth: inset 0 1px 0 rgba(255, 255, 255, 1), inset 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.55), inset 0 26px 44px -32px rgba(255, 255, 255, 0.95), inset 0 -26px 44px -30px rgba(72, 88, 124, 0.26); --hv-card-shadow: 0 1px 1px rgba(16, 20, 28, 0.03), 0 6px 12px -4px rgba(16, 20, 28, 0.06), 0 28px 56px -22px rgba(16, 20, 28, 0.22), 0 72px 120px -52px rgba(16, 20, 28, 0.36); --hv-card-spot: rgba(255, 255, 255, 0.7); --hv-rim-a: rgba(255, 255, 255, 1); --hv-rim-b: rgba(104, 120, 156, 0.5); } html.dark { color-scheme: dark; --hv-bg: #0c0e12; --hv-blob-1: rgba(56, 66, 96, 0.55); --hv-blob-2: rgba(86, 72, 60, 0.4); --hv-blob-3: rgba(44, 60, 82, 0.55); --hv-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --hv-grain-opacity: 0.07; --hv-grain-blend: screen; --hv-text: #f2f3f5; --hv-text-2: #b1b6c0; --hv-text-3: #7f858f; --hv-link: #70b8ff; --hv-line: rgba(255, 255, 255, 0.09); --hv-line-soft: rgba(255, 255, 255, 0.06); --hv-line-strong: rgba(255, 255, 255, 0.24); --hv-hover: rgba(255, 255, 255, 0.06); --hv-hover-strong: rgba(255, 255, 255, 0.1); --hv-focus-ring: rgba(255, 255, 255, 0.7); --hv-selection-bg: #f2f3f5; --hv-selection-fg: #101216; --hv-scroll-thumb: rgba(255, 255, 255, 0.16); --hv-scroll-thumb-hover: rgba(255, 255, 255, 0.3); --hv-code-bg: rgba(255, 255, 255, 0.075); --hv-code-fg: #e3e5ea; --hv-brand-line-rgb: 242, 243, 245; --hv-success: #4cc38a; --hv-success-strong: #3dd68c; --hv-success-soft: rgba(61, 214, 140, 0.13); --hv-success-line: rgba(61, 214, 140, 0.3); --hv-error: #ff7b80; --hv-error-strong: #ff6369; --hv-error-soft: rgba(255, 99, 105, 0.14); --hv-error-line: rgba(255, 99, 105, 0.32); --hv-warning: #f1c262; --hv-warning-strong: #f5b83d; --hv-warning-soft: rgba(245, 184, 61, 0.13); --hv-warning-line: rgba(245, 184, 61, 0.3); --hv-info: #70b8ff; --hv-info-strong: #4aa3ff; --hv-info-soft: rgba(74, 163, 255, 0.14); --hv-info-line: rgba(74, 163, 255, 0.32); --hv-rim: linear-gradient(140deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.09) 26%, rgba(255, 255, 255, 0.03) 58%, rgba(255, 255, 255, 0.18) 100%); --hv-panel-bg: linear-gradient(168deg, rgba(50, 55, 66, 0.66) 0%, rgba(27, 30, 37, 0.6) 48%, rgba(21, 23, 28, 0.66) 100%); --hv-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -22px 40px -30px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 16px -8px rgba(0, 0, 0, 0.4), 0 28px 48px -28px rgba(0, 0, 0, 0.7); --hv-stat-bg: linear-gradient(168deg, rgba(54, 59, 71, 0.7) 0%, rgba(25, 27, 33, 0.62) 100%); --hv-stat-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -18px 30px -24px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3), 0 6px 12px -6px rgba(0, 0, 0, 0.4), 0 20px 36px -24px rgba(0, 0, 0, 0.7); --hv-well: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.26)); --hv-well-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 1px 0 rgba(255, 255, 255, 0.06); --hv-inset-bg: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.18)); --hv-inset-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.05); --hv-list-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03)); --hv-list-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.06); --hv-field-edge: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); --hv-field-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06); --hv-field-fill-hover: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.32)); --hv-field-fill-focus: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.4) 100%); --hv-field-edge-focus: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.26) 36%, rgba(255, 255, 255, 0.16) 64%, rgba(255, 255, 255, 0.6) 100%); --hv-field-shadow-focus: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(255, 255, 255, 0.045), 0 0 22px -2px rgba(255, 255, 255, 0.14); --hv-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a9b4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --hv-option-bg: #1b1e24; --hv-switch-off: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.34)); --hv-switch-off-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06); --hv-switch-on: linear-gradient(180deg, #30c46c, #27ad5d); --hv-switch-knob: #f4f5f7; --hv-switch-knob-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.5); --hv-check-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.12); --hv-check-on: linear-gradient(180deg, #f6f7f9, #d5d8de); --hv-check-on-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --hv-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121417' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); /* Dark mode primary button = matte pearl white */ --hv-ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --hv-cta: var(--hv-ink-grain) 0 0 / 120px 120px padding-box, linear-gradient(112deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 40%) padding-box, linear-gradient(180deg, #f1f2f5 0%, #d4d7dd 100%) padding-box, linear-gradient(180deg, #ffffff 0%, #b9bdc6 100%) border-box; --hv-cta-fg: #14161a; --hv-cta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 1px rgba(0, 0, 0, 0.4), 0 4px 10px -4px rgba(0, 0, 0, 0.6); --hv-cta-shadow-press: inset 0 2px 4px rgba(0, 0, 0, 0.28); --hv-cta-hover: 1.06; --hv-chip-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.055)); --hv-chip-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.085)); --hv-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.075), 0 1px 2px rgba(0, 0, 0, 0.3); --hv-chip-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.4); --hv-table-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)); --hv-table-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.06); --hv-th-bg: rgba(255, 255, 255, 0.035); /* Auto uses #20232a for tables inside panels; here tables sit straight on the dark scene, where the translucent rows composite to about #16181c-#1c1f24, so pinned columns use the middle of that range. */ --hv-sticky-bg: #1a1c22; --hv-row-hover: rgba(255, 255, 255, 0.035); --hv-gauge-track: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)); --hv-gauge-track-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05); --hv-gauge-fill: linear-gradient(180deg, #f4f5f7, #cfd3da); --hv-console-bg: linear-gradient(180deg, #08090b 0%, #050607 100%); --hv-console-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.05); --hv-pop-bg: rgba(30, 33, 40, 0.78); --hv-pop-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px -10px rgba(0, 0, 0, 0.7), 0 32px 60px -32px rgba(0, 0, 0, 0.8); --hv-section-nav-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 24px -14px rgba(0, 0, 0, 0.7); --hv-backdrop: rgba(4, 5, 7, 0.55); --hv-dialog-bg: linear-gradient(168deg, rgba(44, 48, 58, 0.94), rgba(24, 26, 32, 0.92)); --hv-dialog-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -16px rgba(0, 0, 0, 0.7), 0 64px 120px -48px rgba(0, 0, 0, 0.9); --hv-side-bg: linear-gradient(172deg, rgba(48, 53, 64, 0.66) 0%, rgba(20, 22, 27, 0.58) 100%); --hv-side-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -30px 50px -36px rgba(0, 0, 0, 0.5), 0 10px 20px -10px rgba(0, 0, 0, 0.5), 0 36px 64px -32px rgba(0, 0, 0, 0.8); --hv-nav-active-fg: #14161a; --hv-top-bg: rgba(20, 22, 27, 0.66); --hv-drawer-bg: rgba(18, 20, 25, 0.88); --hv-glass-border: rgba(255, 255, 255, 0.1); --hv-glass-hi: rgba(255, 255, 255, 0.07); --hv-nav-bg: rgba(26, 28, 34, 0.55); --hv-card-aura: radial-gradient(38% 32% at 6% 0%, rgba(150, 170, 215, 0.3), transparent 72%), radial-gradient(30% 28% at 96% 96%, rgba(0, 0, 0, 0.7), transparent 72%), radial-gradient(22% 22% at 100% 2%, rgba(190, 160, 130, 0.16), transparent 72%); --hv-card-face: linear-gradient(168deg, rgba(58, 63, 75, 0.72) 0%, rgba(28, 31, 38, 0.62) 46%, rgba(20, 22, 27, 0.7) 100%); --hv-card-rim: linear-gradient(140deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 26%, rgba(255, 255, 255, 0.03) 58%, rgba(255, 255, 255, 0.22) 100%); --hv-card-depth: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 26px 44px -32px rgba(255, 255, 255, 0.1), inset 0 -26px 44px -30px rgba(0, 0, 0, 0.55); --hv-card-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 6px 12px -4px rgba(0, 0, 0, 0.35), 0 28px 56px -22px rgba(0, 0, 0, 0.6), 0 72px 120px -52px rgba(0, 0, 0, 0.85); --hv-card-spot: rgba(255, 255, 255, 0.1); --hv-rim-a: rgba(255, 255, 255, 0.95); --hv-rim-b: rgba(255, 255, 255, 0.22); }