/* Voyatale V2 compatibility aliases and reusable components.
   Canonical Master Bible tokens live in v2-foundation.css. */

:root {
  /* Brand */
  --v2-color-brand: var(--vt-v2-purple, #7d0088);
  --v2-color-brand-strong: var(--vt-v2-purple-deep, #4f075f);
  --v2-color-brand-soft: color-mix(in srgb, var(--vt-v2-purple, #7d0088) 7%, white);
  --v2-color-accent: var(--vt-v2-orange, #ff7900);
  --v2-color-accent-strong: #e66d00;
  --v2-color-accent-soft: #fff4e8;

  /* Neutrals */
  --v2-color-bg: var(--vt-v2-canvas, #faf9f7);
  --v2-color-surface: var(--vt-v2-surface, #ffffff);
  --v2-color-surface-muted: color-mix(in srgb, var(--vt-v2-canvas, #faf9f7) 72%, white);
  --v2-color-text: var(--vt-v2-ink, #17151d);
  --v2-color-text-2: #4f4a55;
  --v2-color-muted: var(--vt-v2-muted, #68636f);
  --v2-color-line: var(--vt-v2-line, #dedce2);
  --v2-color-line-strong: color-mix(in srgb, var(--vt-v2-ink, #17151d) 16%, transparent);
  --v2-color-success: var(--vt-v2-success, #277a4b);
  --v2-color-warning: #c87a13;
  --v2-color-danger: var(--vt-v2-danger, #b42334);

  /* Typography */
  --v2-font-sans: var(--vt-v2-font, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --v2-font-size-xs: 12px;
  --v2-font-size-sm: 14px;
  --v2-font-size-md: 16px;
  --v2-font-size-lg: 18px;
  --v2-font-size-xl: 22px;
  --v2-font-size-2xl: 28px;
  --v2-font-size-3xl: 32px;
  --v2-line-tight: 1.15;
  --v2-line-body: 1.55;
  --v2-weight-medium: 600;
  --v2-weight-bold: 700;
  --v2-weight-heavy: 800;
  --v2-weight-black: 900;

  /* Spacing — 4px base rhythm */
  --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: 28px;
  --v2-space-8: 32px;
  --v2-space-10: 40px;
  --v2-space-12: 48px;

  /* Shape */
  --v2-radius-sm: var(--vt-v2-radius-sm, 12px);
  --v2-radius-md: var(--vt-v2-radius-md, 14px);
  --v2-radius-lg: var(--vt-v2-radius-lg, 16px);
  --v2-radius-xl: var(--vt-v2-radius-lg, 16px);
  --v2-radius-2xl: var(--vt-v2-sheet-radius, 24px);
  --v2-radius-pill: 999px;

  /* Elevation */
  --v2-shadow-xs: 0 2px 8px rgba(23, 21, 29, .05);
  --v2-shadow-sm: var(--vt-v2-shadow, 0 8px 24px rgba(23, 21, 29, .08));
  --v2-shadow-md: 0 16px 42px rgba(23, 21, 29, .10);
  --v2-shadow-sheet: 0 -18px 50px rgba(23, 21, 29, .14);

  /* Sizing */
  --v2-content-max: 1180px;
  --v2-reading-max: 760px;
  --v2-control-h: var(--vt-v2-tap, 44px);
  --v2-control-h-lg: 50px;
  --v2-mobile-nav-h: 66px;

  /* Motion */
  --v2-ease: cubic-bezier(.2, .7, .2, 1);
  --v2-duration-fast: 140ms;
  --v2-duration: 220ms;

  /* Layering */
  --v2-z-header: 5000;
  --v2-z-bottom-nav: 6500;
  --v2-z-sheet: 8000;
  --v2-z-modal: 9000;

  /* Compatibility aliases used by ETAPP 2 shell */
  --v2-purple: var(--v2-color-brand);
  --v2-purple-soft: var(--v2-color-brand-soft);
  --v2-orange: var(--v2-color-accent);
  --v2-ink: var(--v2-color-text);
  --v2-muted: var(--v2-color-muted);
  --v2-line: var(--v2-color-line);
}

/* Shared V2 primitives. Names are deliberately prefixed to avoid legacy collisions. */
.v2Surface,
.v2Card {
  background: var(--v2-color-surface);
  border: 1px solid var(--v2-color-line);
  color: var(--v2-color-text);
}

.v2Card {
  border-radius: var(--v2-radius-xl);
  box-shadow: var(--v2-shadow-xs);
}

.v2Section {
  width: min(var(--v2-content-max), calc(100% - 32px));
  margin-inline: auto;
}

.v2Stack { display: flex; flex-direction: column; gap: var(--v2-space-4); }
.v2Stack--sm { gap: var(--v2-space-2); }
.v2Stack--lg { gap: var(--v2-space-6); }
.v2Inline { display: flex; align-items: center; gap: var(--v2-space-3); }
.v2Divider { height: 1px; background: var(--v2-color-line); border: 0; margin: 0; }

.v2Eyebrow {
  margin: 0;
  color: var(--v2-color-brand);
  font: var(--v2-weight-black) var(--v2-font-size-xs)/1 var(--v2-font-sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.v2Title {
  margin: 0;
  color: var(--v2-color-text);
  font: var(--v2-weight-heavy) clamp(30px, 4.2vw, var(--v2-font-size-3xl))/1.08 var(--v2-font-sans);
  letter-spacing: -.035em;
}

.v2Heading {
  margin: 0;
  color: var(--v2-color-text);
  font: var(--v2-weight-heavy) var(--v2-font-size-xl)/1.2 var(--v2-font-sans);
  letter-spacing: -.02em;
}

.v2Body {
  margin: 0;
  color: var(--v2-color-text-2);
  font: 400 var(--v2-font-size-md)/var(--v2-line-body) var(--v2-font-sans);
}

.v2Muted { color: var(--v2-color-muted); }

/* Buttons */
.v2Button {
  min-height: var(--v2-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-2);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--v2-radius-pill);
  font: var(--v2-weight-heavy) var(--v2-font-size-sm)/1 var(--v2-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--v2-duration-fast) var(--v2-ease), background var(--v2-duration-fast) var(--v2-ease), border-color var(--v2-duration-fast) var(--v2-ease), box-shadow var(--v2-duration-fast) var(--v2-ease);
}

.v2Button:hover { transform: translateY(-1px); }
.v2Button:active { transform: translateY(0); }
.v2Button--primary {
  color: #fff;
  background: var(--v2-color-accent);
  box-shadow: 0 9px 22px rgba(255, 138, 0, .18);
}
.v2Button--primary:hover { background: var(--v2-color-accent-strong); }
.v2Button--brand { color: #fff; background: var(--v2-color-brand); }
.v2Button--brand:hover { background: var(--v2-color-brand-strong); }
.v2Button--secondary {
  color: var(--v2-color-brand);
  background: var(--v2-color-brand-soft);
  border-color: rgba(121, 0, 128, .10);
}
.v2Button--ghost {
  color: var(--v2-color-text-2);
  background: transparent;
  border-color: var(--v2-color-line);
}
.v2Button--danger { color: #fff; background: var(--v2-color-danger); }
.v2Button--block { width: 100%; }

/* Chips / filters */
.v2Chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--v2-color-line);
  border-radius: var(--v2-radius-pill);
  background: var(--v2-color-surface);
  color: var(--v2-color-text-2);
  font: var(--v2-weight-bold) 13px/1 var(--v2-font-sans);
  cursor: pointer;
}
.v2Chip.is-active,
.v2Chip[aria-pressed="true"] {
  color: var(--v2-color-brand);
  border-color: rgba(121, 0, 128, .18);
  background: var(--v2-color-brand-soft);
}

/* Forms */
.v2Field { display: flex; flex-direction: column; gap: 7px; }
.v2FieldLabel {
  color: var(--v2-color-text);
  font: var(--v2-weight-bold) 13px/1.25 var(--v2-font-sans);
}
.v2FieldHint { color: var(--v2-color-muted); font: 500 12px/1.4 var(--v2-font-sans); }
.v2Input,
.v2Textarea,
.v2Select {
  width: 100%;
  min-height: var(--v2-control-h-lg);
  padding: 0 14px;
  border: 1px solid var(--v2-color-line-strong);
  border-radius: var(--v2-radius-md);
  outline: none;
  background: var(--v2-color-surface);
  color: var(--v2-color-text);
  font: 500 var(--v2-font-size-md)/1.4 var(--v2-font-sans);
  box-shadow: none;
  transition: border-color var(--v2-duration-fast) var(--v2-ease), box-shadow var(--v2-duration-fast) var(--v2-ease);
}
.v2Textarea { min-height: 112px; padding-block: 13px; resize: vertical; }
.v2Input:focus,
.v2Textarea:focus,
.v2Select:focus {
  border-color: rgba(121, 0, 128, .42);
  box-shadow: 0 0 0 3px rgba(121, 0, 128, .08);
}
.v2Input::placeholder,
.v2Textarea::placeholder { color: #9aa39d; }

/* Map controls */
.v2MapControlGroup {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}
.v2MapControl {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--v2-color-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  color: var(--v2-color-text);
  box-shadow: var(--v2-shadow-sm);
  cursor: pointer;
}
.v2MapControl.is-active { color: var(--v2-color-brand); background: var(--v2-color-brand-soft); }

/* Sheets / modals */
.v2Scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--v2-z-sheet) - 1);
  background: rgba(17, 21, 19, .42);
  backdrop-filter: blur(4px);
}
.v2Sheet {
  position: fixed;
  z-index: var(--v2-z-sheet);
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(86vh, 760px);
  overflow: auto;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--v2-color-surface);
  box-shadow: var(--v2-shadow-sheet);
}
.v2SheetHandle {
  width: 38px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: var(--v2-radius-pill);
  background: #d7dcda;
}
.v2Modal {
  position: fixed;
  z-index: var(--v2-z-modal);
  inset: 50% auto auto 50%;
  width: min(520px, calc(100% - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 22px;
  border: 1px solid var(--v2-color-line);
  border-radius: var(--v2-radius-xl);
  background: var(--v2-color-surface);
  box-shadow: var(--v2-shadow-md);
}

/* Status / badges */
.v2Badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: var(--v2-radius-pill);
  background: var(--v2-color-surface-muted);
  color: var(--v2-color-text-2);
  font: var(--v2-weight-bold) 11px/1 var(--v2-font-sans);
}
.v2Badge--brand { color: var(--v2-color-brand); background: var(--v2-color-brand-soft); }
.v2Badge--accent { color: #a95000; background: var(--v2-color-accent-soft); }
.v2Badge--success { color: var(--v2-color-success); background: rgba(45, 138, 87, .10); }

/* Accessibility */
.v2Button:focus-visible,
.v2Chip:focus-visible,
.v2MapControl:focus-visible,
.v2Input:focus-visible,
.v2Textarea:focus-visible,
.v2Select:focus-visible {
  outline: 3px solid rgba(121, 0, 128, .18);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .v2Section { width: calc(100% - 24px); }
  /* 16px minimum prevents Safari/iPhone form-focus auto zoom. */
  .v2Input,
  .v2Textarea,
  .v2Select { font-size: 16px; }
  .v2Modal { padding: 18px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2Button,
  .v2Input,
  .v2Textarea,
  .v2Select { transition: none !important; }
}