/**
 * Vechooool surface system — one radius scale, one stroke language.
 *
 * Radius (only these):
 *   sm  9px  — inputs, buttons, nav rows, chips
 *   md 12px  — popovers, secondary panels
 *   lg 16px  — modal shells, large cards
 *   full     — true circles / avatar orbs only
 *
 * Stroke: 1px · --vech-border / --vech-border-strong
 * Brand fill: --brand (#1F2FF1), solid (no gradients for UI chrome)
 */

:root {
  /* Brand */
  --brand: #1F2FF1;
  --brand-rgb: 31, 47, 241;
  --brand-hover: #1826d4;
  --brand-soft: #3d4bf5;
  --brand-muted: #8b96ff;

  /* Radius */
  --vech-radius-sm: 9px;
  --vech-radius-md: 12px;
  --vech-radius-lg: 16px;
  --vech-radius-full: 999px;

  /* Stroke */
  --vech-border-width: 1px;
  --vech-border: rgba(255, 255, 255, 0.08);
  --vech-border-strong: rgba(255, 255, 255, 0.14);

  /* Modal surface (aliases onto the same system) */
  /* Slightly lighter so backdrop blur reads through the dim */
  --modal-backdrop: rgba(0, 0, 0, 0.48);
  --modal-backdrop-blur: 16px;
  /* Frosted panel fill — keep alpha so surface blur can show through */
  --modal-bg: rgba(18, 21, 27, 0.72);
  --modal-bg-solid: #12151b;
  --modal-bg-elevated: rgba(26, 31, 40, 0.88);
  --modal-bg-soft: rgba(255, 255, 255, 0.04);
  --modal-bg-hover: rgba(255, 255, 255, 0.08);
  --modal-surface-blur: 24px;
  --modal-border: var(--vech-border);
  --modal-border-strong: var(--vech-border-strong);
  --modal-text: #e7eef8;
  --modal-text-muted: rgba(231, 238, 248, 0.55);
  --modal-text-soft: rgba(231, 238, 248, 0.72);
  --modal-radius: var(--vech-radius-lg);
  --modal-radius-sm: var(--vech-radius-sm);
  --modal-radius-md: var(--vech-radius-md);
  --modal-radius-pill: var(--vech-radius-full);
  --modal-shadow:
    0 24px 64px rgba(0, 0, 0, 0.48),
    inset 0 1px rgba(255, 255, 255, 0.06);
  --modal-title-size: 1.125rem;
  --modal-body-size: 0.9375rem;
  --modal-caption-size: 0.8125rem;
  --modal-font: var(--vech-font-ui, Aeonik, "Helvetica Neue", "PingFang SC", sans-serif);
}

/* Modal masks: dim + Gaussian blur behind every global dialog */
.vechoool-login-backdrop,
.vechoool-confirm-backdrop,
.vechoool-membership-backdrop,
.vechoool-legal-backdrop,
.vechoool-wechat-contact-backdrop,
.vechoool-mcp-backdrop,
.vechoool-oauth-backdrop,
.account-modal-backdrop,
.template-purchase-backdrop {
  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 16px));
  backdrop-filter: blur(var(--modal-backdrop-blur, 16px));
}

/* Modal shells: translucent fill + Gaussian blur */
.vechoool-login-modal,
.vechoool-confirm,
.vechoool-membership-modal,
.vechoool-legal-modal,
.vechoool-wechat-contact-modal,
.vechoool-mcp-modal .mcp__card,
.vechoool-oauth-modal .vechoool-oauth-card,
.account-modal,
.template-purchase-modal {
  -webkit-backdrop-filter: blur(var(--modal-surface-blur, 24px));
  backdrop-filter: blur(var(--modal-surface-blur, 24px));
}