/* ═══════════════════════════════════════════════════════════════
   VIVEREA — Primitive / Utility Styles (Dark + Light)
   ═══════════════════════════════════════════════════════════════ */

/* ── Surface ── */
.surface {
  background: var(--bg-1);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  border: none;
}

/* ── Hairline ── */
.hairline {
  box-shadow: var(--shadow-1);
}

/* ── Glass ── */
.glass {
  backdrop-filter: blur(var(--blur-l)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(140%);
  background: linear-gradient(to bottom, var(--glass-start), var(--glass-end));
  border: none;
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
}

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--separator);
}

.divider-subtle {
  height: 1px;
  background: var(--separator-subtle);
}

/* ── Visually Hidden (a11y) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Truncate ── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Hidden ── */
.hidden {
  display: none !important;
}