ovtools 0.0.0-stage → 1.0.0

package/public/assets/v2.2/css/components/sidebar.css

@@ -0,0 +1,242 @@
+/* ==========================================================================
+   SYNTEQ UI V2 — 10. BOTTOM NAVIGATION DOCK (components/sidebar.css)
+
+   Layout rules
+   • Items are centred while they fit (safe centre → never clips to the left).
+   • When they no longer fit: the strip is drag-scrollable + a "More" drop-up
+     lists every item that is out of view (progressive overflow).
+   • Group labels are NOT rendered in the dock — icon + label is enough.
+   ========================================================================== */
+.v2-aside {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  min-height: 0;
+  min-width: 0;                   /* never let the dock widen the app grid */
+  overflow: visible;              /* allows the More drop-up to escape upward */
+  background: var(--v2-sidebar);
+  border-top: var(--v2-line-h) solid var(--v2-line);
+  z-index: 20;
+  will-change: transform, opacity;
+  transition: transform var(--v2-dur-normal) var(--v2-ease), opacity var(--v2-dur-fast) var(--v2-ease);
+}
+.v2-aside__brand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--v2-space-2);
+  min-width: 148px;
+  height: 100%;
+  padding: 0 var(--v2-space-4);
+  background: var(--v2-sidebar);
+  color: var(--v2-text-strong);
+  font-size: var(--v2-text-lg);
+  font-weight: var(--v2-fw-semibold);
+  border-right: var(--v2-line-h) solid var(--v2-line);
+  flex-shrink: 0;
+  text-decoration: none;
+  z-index: 2;
+}
+.v2-aside__brand-mark { width: 20px; height: 20px; border-radius: var(--v2-radius-micro); background: var(--v2-brand); display: inline-flex; align-items: center; justify-content: center; color: var(--v2-text-on-accent); flex-shrink: 0; }
+
+/* Nav strip — safe centring + optional drag scroll */
+.v2-nav {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;    /* safe fallback for older engines */
+  justify-content: safe center;   /* centre while it fits, never clip */
+  gap: var(--v2-space-1);
+  padding: var(--v2-space-2);
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: pan-x;
+}
+.v2-nav.has-overflow { cursor: grab; }
+.v2-nav::-webkit-scrollbar { display: none; }
+.v2-nav.is-dragging { cursor: grabbing; scroll-behavior: auto; }
+.v2-nav[data-overflow-start="true"] { box-shadow: inset 24px 0 18px -18px var(--v2-canvas); }
+.v2-nav[data-overflow-end="true"]   { box-shadow: inset -24px 0 18px -18px var(--v2-canvas); }
+.v2-nav[data-overflow-start="true"][data-overflow-end="true"] {
+  box-shadow: inset 24px 0 18px -18px var(--v2-canvas), inset -24px 0 18px -18px var(--v2-canvas);
+}
+
+/* Legacy group labels — intentionally hidden inside the horizontal dock */
+.v2-nav__group-label { display: none; }
+
+/* Nav item — icon over label, vertically centred in the dock */
+.v2-nav__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  gap: var(--v2-space-1);
+  flex: 0 0 auto;
+  min-width: var(--v2-nav-item-w, 84px);
+  max-width: 148px;
+  min-height: 44px;
+  padding: var(--v2-space-1) var(--v2-space-2);
+  border-radius: var(--v2-radius-control);
+  color: var(--v2-text);
+  font-size: var(--v2-text-xs);
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  -webkit-user-drag: none;
+}
+.v2-nav__item > svg { flex-shrink: 0; }
+.v2-nav__item .v2-icon { color: var(--v2-text-subtle); flex-shrink: 0; }
+.v2-nav__item:hover { background: var(--v2-hover); color: var(--v2-text-strong); }
+.v2-nav__item:hover .v2-icon { color: var(--v2-text); }
+.v2-nav__item:focus-visible { z-index: 3; }
+.v2-nav__item--active,
+.v2-nav__item.is-active {
+  color: var(--v2-text-strong);
+  font-weight: var(--v2-fw-semibold);
+  background: color-mix(in srgb, var(--v2-brand) 12%, transparent);
+  box-shadow: inset 0 3px 0 var(--v2-brand);
+}
+.v2-nav__item--active .v2-icon,
+.v2-nav__item.is-active .v2-icon { color: var(--v2-brand); }
+.v2-nav__badge {
+  position: absolute;
+  top: 3px;
+  right: 12px;
+  font-size: var(--v2-text-xs);
+  color: var(--v2-text-subtle);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+
+/* "More" trigger — only rendered when the strip overflows */
+.v2-nav__more {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  width: 56px;
+  margin: var(--v2-space-2) var(--v2-space-2) var(--v2-space-2) 0;
+  border-radius: var(--v2-radius-control);
+  color: var(--v2-text-subtle);
+  font-size: 9px;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  background: var(--v2-sidebar);
+  border-left: var(--v2-line-h) solid var(--v2-line);
+}
+.v2-nav__more[hidden] { display: none; }
+.v2-nav__more:hover { background: var(--v2-hover); color: var(--v2-text-strong); }
+.v2-nav__more[aria-expanded="true"] { background: var(--v2-hover); color: var(--v2-text-strong); }
+.v2-nav__more .v2-icon { color: currentColor; }
+
+/* Drop-up menu (progressive overflow) */
+.v2-nav__menu {
+  position: absolute;
+  right: var(--v2-space-3);
+  bottom: calc(100% + var(--v2-space-2));
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 208px;
+  max-width: min(320px, calc(100vw - var(--v2-space-6)));
+  max-height: min(60vh, 420px);
+  overflow-y: auto;
+  padding: var(--v2-space-2);
+  background: var(--v2-sidebar);
+  border: var(--v2-line-h) solid var(--v2-line-strong);
+  border-radius: var(--v2-radius-control);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
+  animation: v2-drop-up var(--v2-dur-fast) var(--v2-ease) both;
+}
+.v2-nav__menu[hidden] { display: none; }
+.v2-nav__menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--v2-space-2);
+  min-height: 34px;
+  padding: var(--v2-space-2) var(--v2-space-3);
+  border-radius: var(--v2-radius-control);
+  color: var(--v2-text);
+  font-size: var(--v2-text-sm);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.v2-nav__menu-item:hover { background: var(--v2-hover); color: var(--v2-text-strong); }
+.v2-nav__menu-item .v2-icon { color: var(--v2-text-subtle); }
+.v2-nav__menu-item.is-active { background: color-mix(in srgb, var(--v2-brand) 12%, transparent); color: var(--v2-text-strong); font-weight: var(--v2-fw-semibold); }
+.v2-nav__menu-item.is-active .v2-icon { color: var(--v2-brand); }
+.v2-nav__menu-item .v2-nav__badge { position: static; margin-left: auto; }
+
+/* Footer — account row */
+.v2-aside__footer {
+  padding: var(--v2-space-2) var(--v2-space-3);
+  border-left: var(--v2-line-h) solid var(--v2-line);
+  display: flex;
+  align-items: center;
+  gap: var(--v2-space-2);
+  font-size: var(--v2-text-xs);
+  color: var(--v2-text-subtle);
+  flex-shrink: 0;
+  min-height: 48px;
+  background: var(--v2-sidebar);
+}
+.v2-aside__footer .v2-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-status-running); flex-shrink: 0; }
+
+/* ── Breakpoints ─────────────────────────────────────────────────── */
+@media (max-width: 1080px) {
+  .v2-nav__item { min-width: 78px; }
+}
+@media (max-width: 860px) {
+  .v2-aside__brand { min-width: 56px; width: 56px; padding: 0; font-size: 0; }
+  .v2-nav__item { min-width: 72px; font-size: var(--v2-text-xs); }
+  .v2-aside__footer { min-width: 54px; padding: var(--v2-space-2); justify-content: center; }
+  .v2-aside__footer .v2-user__info { display: none; }
+  .v2-nav__more { width: 48px; }
+}
+@media (max-width: 520px) {
+  .v2-aside__brand { min-width: 48px; width: 48px; }
+  .v2-nav { padding: var(--v2-space-1); gap: 2px; }
+  .v2-nav__item { min-width: 64px; max-width: 108px; padding: 2px var(--v2-space-1); }
+  .v2-nav__item .v2-icon { width: 15px; height: 15px; }
+  .v2-nav__more { width: 44px; margin: var(--v2-space-1) var(--v2-space-1) var(--v2-space-1) 0; font-size: 0; }
+  .v2-nav__more .v2-icon { width: 18px; height: 18px; }
+  .v2-aside__footer { min-width: 44px; min-height: 40px; }
+}
+@media (max-width: 380px) {
+  .v2-aside__brand { min-width: 42px; width: 42px; }
+  .v2-nav__item { min-width: 58px; font-size: 10px; }
+  .v2-nav__badge { right: 6px; }
+}
+@media (hover: none) {
+  .v2-nav.has-overflow { cursor: default; }
+  .v2-nav.is-dragging { cursor: default; }
+}
+@media (max-height: 480px) and (orientation: landscape) {
+  .v2-aside__brand { min-width: 52px; }
+  .v2-nav { padding: var(--v2-space-1) var(--v2-space-2); }
+  .v2-nav__item {
+    flex-direction: row;
+    min-width: 0;
+    max-width: none;
+    min-height: 36px;
+    padding: 0 var(--v2-space-3);
+    gap: var(--v2-space-2);
+  }
+  .v2-nav__badge { position: static; margin-left: var(--v2-space-1); }
+  .v2-nav__menu { max-height: 70vh; }
+}

package/public/assets/v2.2/css/components/topbar.css

@@ -0,0 +1,138 @@
+/* ==========================================================================
+   SYNTEQ UI V2 — 08. TOPBAR (components/topbar.css)
+   Single hairline below. Sidebar toggle button always visible in topbar.
+   ========================================================================== */
+.v2-topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--v2-space-2);
+  padding: 0 var(--v2-space-4);
+  border-bottom: var(--v2-line-h) solid var(--v2-line);
+  background: var(--v2-canvas);
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  transition: box-shadow var(--v2-dur-fast) var(--v2-ease);
+}
+.v2-topbar.is-scrolled { box-shadow: 0 1px 20px rgba(0,0,0,.28); }
+[data-theme="light"] .v2-topbar.is-scrolled { box-shadow: 0 1px 12px rgba(0,0,0,.10); }
+
+/* Sidebar toggle button — always in the topbar */
+.v2-sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px; height: 32px;
+  border-radius: var(--v2-radius-control);
+  color: var(--v2-text-subtle);
+  flex-shrink: 0;
+}
+.v2-sidebar-toggle:hover { background: var(--v2-hover); color: var(--v2-text-strong); }
+.v2-sidebar-toggle:active { transform: scale(0.94); }
+
+/* Hamburger → X swap */
+.v2-sidebar-toggle .icon-menu  { display: block; }
+.v2-sidebar-toggle .icon-close { display: none; }
+.v2-app.nav-collapsed .v2-sidebar-toggle .icon-menu  { display: block; }
+.v2-app.nav-collapsed .v2-sidebar-toggle .icon-close { display: none; }
+/* On mobile, open = show X */
+.v2-app:not(.nav-collapsed) .v2-sidebar-toggle .icon-menu  { display: none; }
+.v2-app:not(.nav-collapsed) .v2-sidebar-toggle .icon-close { display: block; }
+
+.v2-topbar__left {
+  display: flex;
+  align-items: center;
+  gap: var(--v2-space-2);
+  min-width: 0;
+  flex: 1;
+}
+.v2-topbar__crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--v2-space-2);
+  font-size: var(--v2-text-sm);
+  color: var(--v2-text-subtle);
+  white-space: nowrap;
+  text-decoration: none;
+}
+.v2-topbar__crumb:hover { color: var(--v2-text); }
+.v2-topbar__sep {
+  color: var(--v2-text-subtle);
+  opacity: 0.35;
+  font-size: var(--v2-text-sm);
+}
+.v2-topbar__title {
+  font-size: var(--v2-text-md);
+  color: var(--v2-text-strong);
+  font-weight: var(--v2-fw-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.v2-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--v2-space-2);
+  flex-shrink: 0;
+}
+
+/* Search/command trigger */
+.v2-search {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--v2-space-2);
+  height: 32px;
+  padding: 0 var(--v2-space-3);
+  background: var(--v2-inset);
+  border-radius: var(--v2-radius-control);
+  color: var(--v2-text-subtle);
+  font-size: var(--v2-text-sm);
+  white-space: nowrap;
+  min-width: 0;
+}
+.v2-search:hover { background: var(--v2-hover); color: var(--v2-text); }
+
+/* Icon-only button */
+.v2-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px; height: 32px;
+  border-radius: var(--v2-radius-control);
+  color: var(--v2-text-subtle);
+  flex-shrink: 0;
+}
+.v2-iconbtn:hover { background: var(--v2-hover); color: var(--v2-text-strong); }
+.v2-iconbtn:active { transform: scale(0.94); }
+
+/* Theme toggle icon swap */
+.v2-theme-toggle .v2-icon--moon { display: none; }
+.v2-theme-toggle .v2-icon--sun  { display: inline-block; }
+[data-theme="dark"] .v2-theme-toggle .v2-icon--moon { display: inline-block; }
+[data-theme="dark"] .v2-theme-toggle .v2-icon--sun  { display: none; }
+
+/* Mobile: collapse search text and kbd pill */
+@media (max-width: 600px) {
+  .v2-search__text { display: none; }
+  .v2-kbd { display: none; }
+  .v2-topbar { padding: 0 var(--v2-space-3); }
+}
+@media (max-width: 420px) {
+  .v2-topbar { padding: 0 var(--v2-space-2); gap: var(--v2-space-1); }
+  .v2-topbar__left { gap: var(--v2-space-1); }
+  .v2-topbar__sep { display: none; }
+  .v2-topbar__crumb .v2-icon { display: none; }
+  .v2-topbar__title { font-size: var(--v2-text-sm); }
+  .v2-topbar__right { gap: var(--v2-space-1); }
+  .v2-search { padding: 0 var(--v2-space-2); }
+}
+@media (max-width: 360px) {
+  .v2-topbar__title { max-width: 42vw; }
+  .v2-topbar__crumb { display: none; }
+}
+@media (max-width: 380px) {
+  .v2-topbar__crumb { display: none; }
+  .v2-topbar__sep   { display: none; }
+}

package/public/assets/v2.2/css/fonts.css

@@ -0,0 +1,30 @@
+/* ==========================================================================
+   SYNTEQ UI V2 — 00. LOCAL FONTS (css/fonts.css)
+   Google Sans Code — self-hosted, zero external requests.
+   Files live at V2/fonts/*.ttf (SIL OFL license).
+   ========================================================================== */
+
+/* Path is relative to THIS css file → ../fonts/ */
+@font-face {
+  font-family: 'Google Sans Code';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/GoogleSansCode-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Google Sans Code';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/GoogleSansCode-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Google Sans Code';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/GoogleSansCode-SemiBold.ttf') format('truetype');
+}

package/public/assets/v2.2/css/synteq-ui-v2.css

@@ -0,0 +1,25 @@
+/* ==========================================================================
+   SYNTEQ UI V2 — MASTER STYLESHEET (css/synteq-ui-v2.css)
+   Lean, viewport-locked, line-separator architecture. No cards.
+
+   Design rules (V2 base set):
+   1. Body never scrolls — only in-content regions scroll.
+   2. Responsive on any screen type (fluid type + breakpoint grid).
+   3. Simple & lightweight — minimal token set, flat surfaces.
+   4. No cards/wrappers — hairline line separators only.
+   5. Lightweight motion — subtle, respects reduced-motion.
+   6. Inline icons for fast context.
+   ========================================================================== */
+@import "./fonts.css";
+@import "./tokens.css";
+@import "./theme-dark.css";
+@import "./theme-light.css";
+@import "./base.css";
+@import "./components/icons.css";
+@import "./components/shell.css";
+@import "./components/sidebar.css";
+@import "./components/topbar.css";
+@import "./components/content.css";
+@import "./components/data.css?v=2.2.1";
+@import "./components/controls.css";
+@import "./components/motion.css";

package/public/assets/v2.2/css/theme-dark.css

@@ -0,0 +1,38 @@
+/* ==========================================================================
+   SYNTEQ UI V2 — 02. DARK THEME (theme-dark.css) [default]
+   Flat surfaces, hairline separators. No card elevation.
+   ========================================================================== */
+:root,
+[data-theme="dark"],
+.theme-dark {
+  color-scheme: dark;
+
+  /* Text — 3-step hierarchy (WCAG AA on canvas) */
+  --v2-text: #d6dada;        /* body / labels */
+  --v2-text-strong: #f4f6f6; /* high-emphasis values, hostnames, active */
+  --v2-text-subtle: #7a8080; /* metadata, units, timestamps */
+  --v2-text-on-accent: #06120f;
+
+  /* Flat surfaces — V2 removes the raised/strong/muted ladder from V1 */
+  --v2-canvas: #0a0b0b;  /* main app background */
+  --v2-sidebar: #070808;  /* navigation background (slightly off canvas) */
+  --v2-hover: #161919;   /* interactive hover/active surface */
+  --v2-inset: #101212;   /* inset rows / inputs / gauge track */
+
+  /* Line separators (the primary structural device in V2 — replaces cards) */
+  --v2-line: #1c2020;        /* default hairline */
+  --v2-line-strong: #2b3030; /* emphasized separator */
+  --v2-line-accent: #1f3a30; /* accent-tinted separator (brand edge) */
+
+  /* Semantic accents */
+  --v2-brand: #00e599;
+  --v2-status-running: #34d399;
+  --v2-status-warning: #fbbf24;
+  --v2-status-error: #f87171;
+  --v2-tel-in: #34d399;
+  --v2-tel-out: #fb7185;
+  --v2-track: #1a1d1d;       /* gauge empty track */
+
+  /* Theme-toggle icon glyph color */
+  --v2-glyph: #9aa0a0;
+}

package/public/assets/v2.2/css/theme-light.css

@@ -0,0 +1,36 @@
+/* ==========================================================================
+   SYNTEQ UI V2 — 03. LIGHT THEME (theme-light.css)
+   Daylight operator palette, same flat hairline architecture.
+   ========================================================================== */
+[data-theme="light"],
+.theme-light {
+  color-scheme: light;
+
+  /* Text — high-contrast daylight hierarchy (WCAG AA verified) */
+  --v2-text: #2f3434;        /* body / labels */
+  --v2-text-strong: #0d1010; /* high-emphasis values, hostnames, active */
+  --v2-text-subtle: #6a7272; /* metadata, units, timestamps */
+  --v2-text-on-accent: #ffffff;
+
+  /* Flat surfaces */
+  --v2-canvas: #f4f6f6;   /* main app background */
+  --v2-sidebar: #ffffff;   /* navigation background */
+  --v2-hover: #e8ecec;    /* interactive hover/active surface */
+  --v2-inset: #eef1f1;    /* inset rows / inputs / gauge track */
+
+  /* Line separators */
+  --v2-line: #e1e5e5;        /* default hairline */
+  --v2-line-strong: #cfd4d4; /* emphasized separator */
+  --v2-line-accent: #b9d9cf; /* accent-tinted separator */
+
+  /* Semantic accents (tuned for light contrast) */
+  --v2-brand: #059669;
+  --v2-status-running: #16a34a;
+  --v2-status-warning: #d97706;
+  --v2-status-error: #dc2626;
+  --v2-tel-in: #16a34a;
+  --v2-tel-out: #e11d48;
+  --v2-track: #e2e6e6;
+
+  --v2-glyph: #5a6363;
+}

package/public/assets/v2.2/css/tokens.css

@@ -0,0 +1,61 @@
+/* ==========================================================================
+   SYNTEQ UI V2 — 01. CORE DESIGN TOKENS (tokens.css)
+   Lean, fluid, responsive-first. No color values here (see theme-*.css).
+   ========================================================================== */
+:root {
+  /* Typography — Google Sans Code as primary, mono fallback */
+  --v2-font-sans: 'Google Sans Code', 'DM Sans', system-ui, -apple-system, sans-serif;
+  --v2-font-mono: 'Google Sans Code', 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Fluid type scale (clamp keeps it responsive without media queries) */
+  --v2-text-xs: 11px;
+  --v2-text-sm: 12px;
+  --v2-text-md: 13px;
+  --v2-text-lg: 15px;
+  --v2-text-xl: 18px;
+  --v2-text-2xl: clamp(22px, 2.4vw, 28px);
+  --v2-text-3xl: clamp(26px, 3.2vw, 34px);
+
+  --v2-fw-regular: 400;
+  --v2-fw-medium: 500;
+  --v2-fw-semibold: 600;
+  --v2-fw-bold: 700;
+  --v2-leading-tight: 1.2;
+  --v2-leading-base: 1.5;
+
+  /* Spacing — 4px base scale (lightweight, fewer steps than V1) */
+  --v2-space-1: 4px;
+  --v2-space-2: 8px;
+  --v2-space-3: 12px;
+  --v2-space-4: 16px;
+  --v2-space-5: 20px;
+  --v2-space-6: 24px;
+  --v2-space-7: 32px;
+  --v2-space-8: 40px;
+  --v2-space-9: 56px;
+
+  /* Radius — minimal two-tier (V2 favors near-flat surfaces) */
+  --v2-radius-micro: 2px;   /* micro badges, status dots, chart caps */
+  --v2-radius-control: 5px; /* buttons, inputs, segmented, nav items */
+
+  /* Layout shell tokens (drive the viewport-locked grid) */
+  --v2-aside-w: clamp(204px, 17vw, 240px);
+  --v2-topbar-h: 52px;
+  --v2-bottomnav-h: 60px;
+
+  /* Content column — every .v2-section is centred inside this measure */
+  --v2-content-max: 1200px;
+  /* Bottom dock item width — drives the overflow (More / drag) threshold */
+  --v2-nav-item-w: 80px;
+
+  /* Motion — lightweight, single easing curve */
+  --v2-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --v2-dur-instant: 120ms;
+  --v2-dur-fast: 180ms;
+  --v2-dur-normal: 280ms;
+  --v2-dur-slow: 420ms;
+
+  /* Hairline separator weights */
+  --v2-line-h: 1px;
+  --v2-line-h-strong: 1px;
+}