/* v2-build.css — aliases to design-tokens.css canonical tokens.
   Requires design-tokens.css to be loaded first. */
:root {
  --v2-bg: var(--color-bg, #f6f6f3);
  --v2-card: var(--color-card, #ffffff);
  --v2-text: var(--color-text, #111111);
  --v2-muted: var(--color-text-muted, #5f6470);
  --v2-border: var(--color-border, #e5e7eb);
  --v2-yellow: var(--color-yellow, #FFD700);
  --v2-yellow-deep: var(--color-yellow-deep, #e8b930);
  --v2-soft: var(--color-soft, #faf8ea);
  --v2-shadow: var(--shadow-heavy, 0 12px 32px rgba(17,17,17,0.06));
  --v2-radius-xl: var(--radius-card, 24px);
  --v2-radius-lg: var(--radius-card-sm, 18px);
  --v2-radius-md: var(--radius-lg, 16px);
}

.v2-preview-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 24px;
}

.v2-preview-block {
  background: var(--v2-card);
  border: 1.5px solid var(--v2-border);
  border-radius: var(--v2-radius-xl);
  box-shadow: var(--v2-shadow);
  overflow: hidden;
  margin-bottom: 20px;
}

.v2-preview-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  padding: 28px;
  background: linear-gradient(180deg, #fffef8 0%, #ffffff 100%);
}

.v2-preview-copy h1,
.v2-preview-copy h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
  color: var(--v2-text);
}

.v2-preview-copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--v2-muted);
  margin: 0 0 18px;
  max-width: 58ch;
}

.v2-preview-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--v2-border);
  background: #fff;
  color: var(--v2-text);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.v2-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.v2-primary-btn,
.v2-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none;
  font-family: inherit;
}

.v2-primary-btn {
  border: 1px solid #111;
  background: #111;
  color: #fff;
}

.v2-primary-btn:hover { background: #333; border-color: #333; }

.v2-secondary-btn {
  border: 1.5px solid var(--v2-border);
  background: #fff;
  color: #111;
}

.v2-preview-side {
  display: grid;
  gap: 14px;
}

.v2-mini-card,
.v2-stat-card,
.v2-tile,
.v2-list-card {
  background: #fff;
  border: 1.5px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
}

.v2-mini-card {
  padding: 18px;
}

.v2-mini-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.v2-mini-card p {
  margin: 0;
  color: var(--v2-muted);
  font-size: .92rem;
  line-height: 1.55;
}

.v2-chip-row,
.v2-tab-row,
.v2-skill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-chip,
.v2-tab,
.v2-skill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--v2-border);
  background: #fff;
  color: var(--v2-text);
  font-size: .8rem;
  font-weight: 700;
}

.v2-tab.is-active {
  background: #111;
  border-color: #111;
  color: #fff;
}

.v2-summary-grid,
.v2-stats-grid,
.v2-tiles-grid,
.v2-card-grid {
  display: grid;
  gap: 14px;
}

.v2-summary-grid,
.v2-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2-tiles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.v2-stat-card {
  padding: 18px;
}

.v2-stat-label {
  display: block;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
  color: var(--v2-muted);
  margin-bottom: 6px;
}

.v2-stat-value {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--v2-text);
}

.v2-tile {
  padding: 18px;
}

.v2-tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--v2-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.v2-tile h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.v2-tile p {
  margin: 0;
  color: var(--v2-muted);
  font-size: .9rem;
  line-height: 1.55;
}

.v2-list-card {
  padding: 18px;
}

.v2-list-card h3 {
  margin: 0 0 14px;
  font-size: 1rem;
}

.v2-list {
  display: grid;
  gap: 10px;
}

.v2-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fafaf8;
  border: 1px solid #ecebe4;
}

.v2-list-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.v2-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--v2-yellow);
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex-shrink: 0;
}

.v2-list-copy strong {
  display: block;
  font-size: .92rem;
}

.v2-list-copy span {
  display: block;
  font-size: .8rem;
  color: var(--v2-muted);
}

.v2-page-note {
  padding: 18px 22px 0;
  color: var(--v2-muted);
  font-size: .88rem;
  line-height: 1.55;
}

.v2-live-section {
  padding: 0 22px 24px;
}

.v2-live-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 18px 0 14px;
}

@media (max-width: 960px) {
  .v2-preview-hero,
  .v2-summary-grid,
  .v2-stats-grid,
  .v2-tiles-grid,
  .v2-card-grid {
    grid-template-columns: 1fr;
  }

  .v2-preview-shell { padding: 18px 14px 18px; }
  .v2-preview-hero { padding: 20px; }
}