/*
 * WebVegas component primitives — canonical, token-driven.
 * Single source of component STYLING. Both the deployable gallery
 * (gallery/index.html) and the React wrappers (components/*.tsx) consume these
 * classes, so the documented catalog and the rendered React are pixel-identical.
 * Requires tokens.css loaded first, inside a `.wv-scope` root.
 * WebVegas-OWNED surfaces only. Locked 2026-06-13.
 */

/* ─── Base type helpers ────────────────────────────────────────────────────*/
.wv-scope .wv-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--coral-deep); /* AA at 13px (sunset coral fails 4.5:1 at small size) */
}
.wv-scope .wv-h1 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-hero); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text); margin: 0; }
.wv-scope .wv-h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-4xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text); margin: 0; }
.wv-scope .wv-h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text); margin: 0; }
.wv-scope .wv-lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-muted); margin: 0; }
.wv-scope .wv-body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); margin: 0; }
.wv-scope .wv-quote { font-family: var(--font-accent); font-style: italic; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text); }
.wv-scope .wv-sunset-word { background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ─── Button ───────────────────────────────────────────────────────────────*/
.wv-scope .wv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-md);
  line-height: 1; white-space: nowrap; cursor: pointer; border: 0;
  border-radius: var(--r-pill); padding: 14px 26px;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard);
  text-decoration: none; user-select: none;
}
.wv-scope .wv-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wv-scope .wv-btn .ms { font-size: 20px; }

/* Primary CTA = SURFACED bevel + the brand GLOW (kept). Raised, presses in. */
.wv-scope .wv-btn--primary { background: var(--grad-sunset); color: var(--text-invert); box-shadow: var(--btn-cta-rest); }
.wv-scope .wv-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--btn-cta-hover); filter: saturate(1.05) brightness(1.02); }
.wv-scope .wv-btn--primary:active { transform: translateY(1px); box-shadow: var(--btn-cta-press); filter: brightness(.97); }

/* Secondary = FILLED TONAL (medium emphasis). Same surfaced bevel as the
 * primary, soft neutral fill, navy text, NO gradient + NO glow + NO border.
 * In a surfaced system a flat outline ghost reads inconsistent next to a raised
 * primary; a tonal fill keeps it in the same physical world, clearly quieter.
 * (Material 3 "filled tonal" — more presence than an outline, less than filled.) */
.wv-scope .wv-btn--secondary { background: var(--light); color: var(--navy); box-shadow: var(--depth-raise); }
.wv-scope .wv-btn--secondary:hover { transform: translateY(-2px); background: #DCE3EC; box-shadow: var(--depth-raise-hover); }
.wv-scope .wv-btn--secondary:active { transform: translateY(1px); background: var(--light); box-shadow: var(--depth-raise-press); }

.wv-scope .wv-btn--tertiary { background: transparent; color: var(--coral-deep); padding-left: 12px; padding-right: 12px; box-shadow: none; } /* text button stays flat by nature */
.wv-scope .wv-btn--tertiary:hover { background: var(--status-danger-bg); }
.wv-scope .wv-btn--tertiary:active { transform: translateY(1px); }

/* Danger = SURFACED bevel, NO glow (urgency from color, not bloom). */
.wv-scope .wv-btn--danger { background: var(--status-danger); color: var(--text-invert); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -3px 6px rgba(120,15,25,.3), var(--depth-raise); }
.wv-scope .wv-btn--danger:hover { transform: translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -3px 6px rgba(120,15,25,.3), var(--depth-raise-hover); filter: brightness(1.04); }
.wv-scope .wv-btn--danger:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(120,15,25,.4), inset 0 1px 0 rgba(255,255,255,.25); }

.wv-scope .wv-btn--sm { font-size: var(--text-sm); padding: 9px 18px; }
.wv-scope .wv-btn--sm .ms { font-size: 18px; }
.wv-scope .wv-btn--lg { font-size: var(--text-lg); padding: 18px 34px; }
.wv-scope .wv-btn--block { display: flex; width: 100%; }
.wv-scope .wv-btn[disabled], .wv-scope .wv-btn--disabled { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }
.wv-scope .wv-btn--loading { color: transparent !important; position: relative; pointer-events: none; }
.wv-scope .wv-btn--loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--text-invert);
  animation: wv-spin .7s linear infinite;
}

.wv-scope .wv-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-circle); border: 0; cursor: pointer;
  background: var(--surface); color: var(--text); box-shadow: var(--depth-raise);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-standard);
}
.wv-scope .wv-iconbtn:hover { transform: translateY(-2px); box-shadow: var(--depth-raise-hover); }
.wv-scope .wv-iconbtn:active { transform: translateY(1px); box-shadow: var(--depth-raise-press); }
.wv-scope .wv-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ─── Badge / Pill (TEXT, not a button) ────────────────────────────────────*/
.wv-scope .wv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  line-height: 1; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-muted);
}
.wv-scope .wv-badge .ms { font-size: 16px; }
.wv-scope .wv-badge--sunset { background: var(--grad-sunset); color: var(--text-invert); }
.wv-scope .wv-badge--sage { background: var(--status-info-bg); color: #3C6259; } /* AA on info-bg */
.wv-scope .wv-badge--success { background: var(--status-success-bg); color: #2A7248; } /* AA on success-bg */
.wv-scope .wv-badge--caution { background: var(--status-caution-bg); color: #7E520C; } /* AA on caution-bg */
.wv-scope .wv-badge--danger { background: var(--status-danger-bg); color: #BE1F2E; }
.wv-scope .wv-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ─── Card ─────────────────────────────────────────────────────────────────*/
.wv-scope .wv-card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e1);
  padding: var(--card-pad);
}
.wv-scope .wv-card--warm { background: var(--surface-warm); }
.wv-scope .wv-card--feature { border-radius: var(--r-xl); padding: var(--space-8); box-shadow: var(--e2); }
.wv-scope .wv-card--interactive { cursor: pointer; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.wv-scope .wv-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.wv-scope .wv-card__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xl); color: var(--text); margin: 0 0 6px; }
.wv-scope .wv-card__body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-muted); margin: 0; }

/* ─── Stat tile ────────────────────────────────────────────────────────────*/
.wv-scope .wv-stat { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e1); padding: var(--space-6); }
.wv-scope .wv-stat__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.wv-scope .wv-stat__value { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-4xl); line-height: 1; color: var(--text); margin: 0; }
.wv-scope .wv-stat__trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-top: 10px; }
.wv-scope .wv-stat__trend--up { color: #2A7248; }   /* AA on white at 13px */
.wv-scope .wv-stat__trend--down { color: var(--status-danger); }
.wv-scope .wv-stat__trend .ms { font-size: 18px; }

/* ─── Form fields ──────────────────────────────────────────────────────────*/
.wv-scope .wv-field { display: flex; flex-direction: column; gap: 6px; }
.wv-scope .wv-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.wv-scope .wv-hint { font-size: var(--text-sm); color: var(--text-muted); }
.wv-scope .wv-error { font-size: var(--text-sm); color: var(--status-danger); display: flex; align-items: center; gap: 4px; }
/* Inputs = RECESSED wells (sink into the surface — the opposite of a raised button). */
.wv-scope .wv-input, .wv-scope .wv-textarea, .wv-scope .wv-select {
  font-family: var(--font-sans); font-size: var(--text-md); color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--depth-recess);
  padding: 12px 14px; width: 100%; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.wv-scope .wv-input::placeholder, .wv-scope .wv-textarea::placeholder { color: var(--text-faint); }
.wv-scope .wv-input:focus, .wv-scope .wv-textarea:focus, .wv-scope .wv-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--depth-recess), 0 0 0 3px var(--primary-glow); }
.wv-scope .wv-input--error, .wv-scope .wv-textarea--error { border-color: var(--status-danger); }
.wv-scope .wv-textarea { min-height: 96px; resize: vertical; }
.wv-scope .wv-select { appearance: none; background-image: none; cursor: pointer; }

/* Toggle = recessed track + a RAISED, beveled knob. */
.wv-scope .wv-toggle { position: relative; display: inline-flex; align-items: center; width: 48px; height: 28px; border-radius: var(--r-pill); background: var(--border-strong); box-shadow: inset 0 1.5px 3px rgba(20,20,45,.18); cursor: pointer; transition: background var(--dur-base) var(--ease-standard); border: 0; padding: 0; }
.wv-scope .wv-toggle::after { content: ""; position: absolute; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(20,20,45,.35); transition: transform var(--dur-base) var(--ease-spring); }
.wv-scope .wv-toggle[aria-checked="true"] { background: var(--grad-sunset); box-shadow: inset 0 1.5px 3px rgba(150,20,30,.3); }
.wv-scope .wv-toggle[aria-checked="true"]::after { transform: translateX(20px); }

.wv-scope .wv-checkbox { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-xs); border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); }
.wv-scope .wv-checkbox[aria-checked="true"] { background: var(--grad-sunset); border-color: transparent; color: #fff; }
.wv-scope .wv-checkbox .ms { font-size: 16px; opacity: 0; }
.wv-scope .wv-checkbox[aria-checked="true"] .ms { opacity: 1; }

/* ─── Banner ───────────────────────────────────────────────────────────────*/
.wv-scope .wv-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--r-md); font-size: var(--text-base); }
.wv-scope .wv-banner .ms { font-size: 22px; flex: none; }
.wv-scope .wv-banner--info { background: var(--status-info-bg); color: #3C6259; }    /* AA */
.wv-scope .wv-banner--success { background: var(--status-success-bg); color: #2A7248; } /* AA */
.wv-scope .wv-banner--caution { background: var(--status-caution-bg); color: #7E520C; } /* AA */
.wv-scope .wv-banner--danger { background: var(--status-danger-bg); color: #BE1F2E; }

/* ─── Table + list row ─────────────────────────────────────────────────────*/
.wv-scope .wv-table-wrap { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e1); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.wv-scope .wv-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--text-base); }
.wv-scope .wv-table th { text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); padding: 14px 18px; background: var(--surface-sunken); }
.wv-scope .wv-table td { padding: 14px 18px; border-top: 1px solid var(--border); color: var(--text); }
.wv-scope .wv-table tr:hover td { background: var(--surface-cream); }

.wv-scope .wv-listrow { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--e1); }
.wv-scope .wv-listrow__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--grad-sunset); color: #fff; font-weight: var(--weight-bold); }
.wv-scope .wv-listrow__main { flex: 1; min-width: 0; }
.wv-scope .wv-listrow__title { font-weight: var(--weight-semibold); color: var(--text); }
.wv-scope .wv-listrow__sub { font-size: var(--text-sm); color: var(--text-muted); }

/* ─── Header (marketing nav) ───────────────────────────────────────────────*/
.wv-scope .wv-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: rgba(249,249,252,.8); backdrop-filter: blur(12px); border-radius: var(--r-xl); box-shadow: var(--e1); }
.wv-scope .wv-header__nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.wv-scope .wv-header__link { font-weight: var(--weight-medium); color: var(--text-muted); text-decoration: none; font-size: var(--text-md); transition: color var(--dur-fast) var(--ease-standard); }
.wv-scope .wv-header__link:hover { color: var(--text); }

/* ─── Modal ────────────────────────────────────────────────────────────────*/
.wv-scope .wv-modal-overlay { position: fixed; inset: 0; background: rgba(26,28,30,.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: var(--space-5); z-index: 50; }
.wv-scope .wv-modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--e3); padding: var(--space-8); max-width: 460px; width: 100%; animation: wv-pop var(--dur-slow) var(--ease-spring) both; }
.wv-scope .wv-modal__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--text); margin: 0 0 8px; }
.wv-scope .wv-modal__body { color: var(--text-muted); line-height: var(--leading-normal); margin: 0 0 var(--space-6); }
.wv-scope .wv-modal__actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* ─── Toast ────────────────────────────────────────────────────────────────*/
.wv-scope .wv-toast { display: flex; align-items: center; gap: var(--space-3); background: var(--navy); color: var(--text-onnavy); padding: var(--space-4) var(--space-5); border-radius: var(--r-md); box-shadow: var(--e3); animation: wv-pop var(--dur-slow) var(--ease-spring) both; max-width: 380px; }
.wv-scope .wv-toast .ms { font-size: 22px; flex: none; }
.wv-scope .wv-toast--success .ms { color: #8FE3B0; }
.wv-scope .wv-toast__title { font-weight: var(--weight-semibold); }
.wv-scope .wv-toast__sub { font-size: var(--text-sm); color: #A7B2C0; } /* AA on navy */

/* ─── Empty state ──────────────────────────────────────────────────────────*/
.wv-scope .wv-empty { text-align: center; padding: var(--space-10) var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.wv-scope .wv-empty__art { width: 140px; height: 140px; object-fit: contain; }
.wv-scope .wv-empty__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xl); color: var(--text); margin: 0; }
.wv-scope .wv-empty__body { color: var(--text-muted); max-width: 320px; margin: 0; }

/* ─── Dashboard shell ──────────────────────────────────────────────────────*/
.wv-scope .wv-shell { display: grid; grid-template-columns: 232px 1fr; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--e2); min-height: 420px; }
.wv-scope .wv-shell__side { background: var(--navy); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.wv-scope .wv-shell__navitem { display: flex; align-items: center; gap: var(--space-3); padding: 11px 14px; border-radius: var(--r-md); color: var(--text-onnavy); opacity: .72; font-weight: var(--weight-medium); cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); }
.wv-scope .wv-shell__navitem:hover { opacity: 1; background: rgba(255,255,255,.06); }
.wv-scope .wv-shell__navitem--active { opacity: 1; background: var(--grad-sunset); color: #fff; }
.wv-scope .wv-shell__navitem .ms { font-size: 20px; }
.wv-scope .wv-shell__main { background: var(--bg); padding: var(--space-6); }
.wv-scope .wv-shell__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }

/* ─── Tabs ─────────────────────────────────────────────────────────────────*/
.wv-scope .wv-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface-sunken); border-radius: var(--r-pill); }
.wv-scope .wv-tab { border: 0; background: transparent; font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-muted); padding: 9px 18px; border-radius: var(--r-pill); cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); }
.wv-scope .wv-tab--active { background: var(--surface); color: var(--text); box-shadow: var(--e1); }

/* ─── Monty wrapper ────────────────────────────────────────────────────────*/
.wv-scope .wv-monty { display: inline-block; animation: wv-pop var(--dur-deliberate) var(--ease-spring) both; }
.wv-scope .wv-monty img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wv-scope .wv-monty--chat { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-warm); box-shadow: var(--e1); padding: 4px; }
.wv-scope .wv-monty--hero { width: 280px; height: 280px; }
.wv-scope .wv-monty--badge { width: 40px; height: 40px; }

/* ─── Suggestion queue (autopilot) ─────────────────────────────────────────
 * Source: webvegas-dashboard operator console, 2026-06-15. Monty authors sourced
 * improvement suggestions; the client answers Yes/No/Maybe. Operator sees the queue. */
.wv-scope .wv-queue { display: flex; flex-direction: column; gap: var(--space-3); }
.wv-scope .wv-queue__item { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.wv-scope .wv-queue__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.wv-scope .wv-queue__cat { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.wv-scope .wv-queue__cat--seo { color: var(--navy); }          /* on-brand: NO blue */
.wv-scope .wv-queue__cat--aeo { color: var(--sage-deep); }
.wv-scope .wv-queue__cat--content { color: #2A7248; }
.wv-scope .wv-queue__cat--conversion { color: var(--primary); }
.wv-scope .wv-queue__title { font-weight: var(--weight-semibold); color: var(--text); }
.wv-scope .wv-queue__note { font-size: var(--text-sm); color: var(--text); font-style: italic; }
.wv-scope .wv-queue__src { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); display: inline-flex; align-items: center; gap: 4px; }

/* ─── Stat tile tone (operator KPI strip) ──────────────────────────────────
 * Value/icon take a DS status color to flag an alert or a positive. */
.wv-scope .wv-stat__value--alert { color: var(--status-danger); }
.wv-scope .wv-stat__value--ok { color: #2A7248; }

/* ─── Build-stage badge (post-sale pipeline) ───────────────────────────────
 * 5-step, on-brand only (DS red-line: no blue/violet/steel):
 * sold → building → staging → client-approval → live. */
.wv-scope .wv-stage { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 5px 10px; border-radius: var(--r-pill); }
.wv-scope .wv-stage--sold     { background: var(--surface-sunken);   color: var(--navy); }
.wv-scope .wv-stage--building { background: var(--status-info-bg);   color: var(--sage-deep); }
.wv-scope .wv-stage--staging  { background: var(--status-caution-bg);color: #7E520C; }
.wv-scope .wv-stage--approval { background: var(--status-danger-bg); color: var(--primary); }
.wv-scope .wv-stage--live     { background: var(--status-success-bg);color: #2A7248; }