/* vrenvo.css — GENERATED from config/design.tokens.json by
 * scripts/generate-vrenvo-css.mjs. DO NOT EDIT BY HAND — change the tokens and
 * regenerate:  node scripts/generate-vrenvo-css.mjs
 * System layer: base/tile/inset surfaces, violet-only accent, no shadows,
 * borderless cards, solid divider, no outlined buttons. */
:root {
  --v-page: #0B0B0F;
  --v-raised: #101016;
  --v-card: #16161C;
  --v-line: #22222B;
  --v-text: #F8F8EE;
  --v-text-2: #9CA0AC;
  --v-text-3: #6E7280;
  --v-accent: #7C3AED;
  --v-accent-hover: #9D5CF5;
  --v-accent-soft: #A78BFA;
  --v-danger: #F87171;
  --v-chip-fill: #1C1C24;
  --v-chip-text: #A78BFA;
  --v-success: #34D399;
  --v-warning: #FBBF24;
  --v-error: #F87171;
  --v-font: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  --v-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --v-display: 32px;
  --v-title: 22px;
  --v-body: 15px;
  --v-caption: 13px;
  --v-micro: 11px;
  --v-s0: 4px;
  --v-s1: 8px;
  --v-s2: 12px;
  --v-s3: 16px;
  --v-s4: 24px;
  --v-s5: 32px;
  --v-s6: 48px;
  --v-s7: 64px;
  --v-card-pad: 20px;
  --v-r-card: 16px;
  --v-r-btn: 12px;
  --v-r-chip: 999px;
}

/* base */
.v-body {
  margin: 0;
  background: var(--v-page);
  color: var(--v-text);
  font-family: var(--v-font);
  font-size: var(--v-body);
  -webkit-font-smoothing: antialiased;
}
.v-container { max-width: 680px; margin: 0 auto; padding: 0 var(--v-s3); }
.v-container-app { max-width: 1080px; margin: 0 auto; padding: 0 var(--v-s3); }

/* type */
.v-display { font-size: var(--v-display); font-weight: 700; letter-spacing: -0.02em; color: var(--v-text); }
.v-title { font-size: var(--v-title); font-weight: 700; letter-spacing: -0.01em; color: var(--v-text); }
.v-caption { font-size: var(--v-caption); color: var(--v-text-2); }
.v-price { font-family: var(--v-mono); font-size: var(--v-caption); font-weight: 500; color: var(--v-accent-soft); }
.v-value { font-family: var(--v-mono); }

/* components — mirror of client/src/components/ui.jsx */
.v-btn-primary {
  display: block; width: 100%; box-sizing: border-box;
  height: 48px; line-height: 48px;
  padding: 0 var(--v-s4);
  background: var(--v-accent); color: #fff;
  border: none; border-radius: var(--v-r-btn);
  font-family: var(--v-font); font-size: var(--v-body); font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: 200ms ease;
}
.v-btn-primary:hover { background: var(--v-accent-hover); }
.v-btn-secondary {
  display: inline-block; box-sizing: border-box;
  padding: var(--v-s2) var(--v-s4);
  background: var(--v-card); color: var(--v-text);
  border: none; border-radius: var(--v-r-btn);
  font-family: var(--v-font); font-size: var(--v-body); font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: 200ms ease;
}
.v-btn-tertiary {
  display: inline-block; box-sizing: border-box;
  padding: var(--v-s1);
  background: transparent; color: var(--v-accent-soft);
  border: none;
  font-family: var(--v-font); font-size: var(--v-body); font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: 200ms ease;
}
.v-card {
  background: var(--v-card);
  border: none;
  border-radius: var(--v-r-card);
  padding: var(--v-card-pad);
  box-sizing: border-box;
}
.v-divider { height: 1px; background: var(--v-line); }
.v-input {
  width: 100%; box-sizing: border-box;
  padding: var(--v-s2) var(--v-s3);
  background: var(--v-raised); color: var(--v-text);
  border: 1px solid var(--v-line); border-radius: var(--v-r-btn);
  font-family: var(--v-font); font-size: var(--v-body);
}
.v-chip {
  display: inline-flex; align-items: center; gap: var(--v-s1);
  height: 28px; box-sizing: border-box;
  padding: 0 var(--v-s2);
  background: var(--v-chip-fill); color: var(--v-chip-text);
  border: none; border-radius: var(--v-r-chip);
  font-family: var(--v-font); font-size: var(--v-caption); font-weight: 500;
}
.v-section-header {
  font-size: var(--v-caption); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--v-text-3);
  margin: var(--v-s4) 0 var(--v-s2);
}
