/**
 * BetDNA Design Tokens — PDS-002
 * Standardisation only — values map to existing V1 visual language.
 */
:root {
  --bdna-color-bg: var(--bdna-bg);
  --bdna-color-surface: var(--bdna-card);
  --bdna-color-surface-2: var(--bdna-surface-2);
  --bdna-color-text: var(--bdna-text-primary);
  --bdna-color-muted: var(--bdna-text-muted);
  --bdna-color-accent: var(--bdna-accent);
  --bdna-color-accent-2: var(--bdna-secondary);
  --bdna-color-warn: var(--bdna-warning);
  --bdna-color-positive: var(--bdna-success);
  --bdna-color-negative: var(--bdna-danger);

  /* Spacing */
  --bdna-space-2xs: 2px;
  --bdna-space-xs: 4px;
  --bdna-space-sm: 8px;
  --bdna-space-md: 12px;
  --bdna-space-lg: 16px;
  --bdna-space-xl: 20px;
  --bdna-space-2xl: 24px;

  /* Typography */
  --bdna-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --bdna-font-xs: 0.72rem;
  --bdna-font-sm: 0.75rem;
  --bdna-font-md: 0.8rem;
  --bdna-font-base: 0.85rem;
  --bdna-font-lg: 0.95rem;
  --bdna-font-xl: 1.25rem;
  --bdna-font-weight-normal: 400;
  --bdna-font-weight-semibold: 600;
  --bdna-font-weight-bold: 700;
  --bdna-line-height-tight: 1.35;
  --bdna-line-height-normal: 1.4;
  --bdna-letter-spacing-label: 0.04em;

  /* Borders & radius */
  --bdna-radius-sm: 8px;
  --bdna-radius-md: var(--radius);
  --bdna-radius-pill: 999px;
  --bdna-border-width: 1px;
  --bdna-border-color: var(--surface2);
  --bdna-border-accent: var(--accent2);

  /* Elevation */
  --bdna-elevation-none: none;
  --bdna-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.18);
  --bdna-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.22);

  /* Icon sizing */
  --bdna-icon-xs: 12px;
  --bdna-icon-sm: 14px;
  --bdna-icon-md: 18px;
  --bdna-icon-lg: 22px;

  /* Panel & card spacing */
  --bdna-panel-padding: 14px;
  --bdna-card-padding: 16px;
  --bdna-section-gap: var(--bdna-space-md);
  --bdna-workspace-gap: var(--bdna-space-md);

  /* Animation */
  --bdna-duration-fast: 150ms;
  --bdna-duration-normal: 250ms;
  --bdna-duration-slow: 400ms;
  --bdna-ease-standard: ease;
}

.stat-val,
.tcc-stat-val,
.cockpit-hierarchy-val,
.betdna-metric-val {
  font-variant-numeric: tabular-nums;
}

/* BetDNA component namespace — mirrors legacy classes during transition */
.betdna-workspace-header {
  background: var(--bdna-color-surface);
  border-radius: var(--bdna-radius-md);
  padding: var(--bdna-panel-padding);
  margin-bottom: var(--bdna-section-gap);
  border-left: 3px solid var(--bdna-color-accent);
}
.betdna-workspace-header .betdna-workspace-title { font-size: var(--bdna-font-lg); margin-bottom: var(--bdna-space-xs); }
.betdna-workspace-header .betdna-workspace-question {
  font-size: var(--bdna-font-base);
  color: var(--bdna-color-text);
  font-weight: var(--bdna-font-weight-semibold);
  margin-bottom: var(--bdna-space-xs);
}
.betdna-section {
  background: var(--bdna-color-surface);
  border-radius: var(--bdna-radius-md);
  padding: var(--bdna-card-padding);
  margin-bottom: var(--bdna-section-gap);
}
.betdna-section-title { font-size: var(--bdna-font-lg); margin-bottom: var(--bdna-space-sm); }
.betdna-divider {
  border: none;
  border-top: var(--bdna-border-width) solid var(--bdna-border-color);
  margin: var(--bdna-space-lg) 0;
}
.betdna-divider-labeled {
  display: flex;
  align-items: center;
  gap: var(--bdna-space-sm);
  color: var(--bdna-color-muted);
  font-size: var(--bdna-font-sm);
  text-transform: uppercase;
  letter-spacing: var(--bdna-letter-spacing-label);
  margin: var(--bdna-space-lg) 0 var(--bdna-space-md);
}
.betdna-divider-labeled::before,
.betdna-divider-labeled::after {
  content: "";
  flex: 1;
  border-top: var(--bdna-border-width) solid var(--bdna-border-color);
}
.betdna-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bdna-space-sm);
  align-items: center;
  margin-bottom: var(--bdna-section-gap);
}
.betdna-footer {
  margin-top: var(--bdna-space-lg);
  padding-top: var(--bdna-space-md);
  border-top: var(--bdna-border-width) solid var(--bdna-border-color);
  color: var(--bdna-color-muted);
  font-size: var(--bdna-font-md);
}
.betdna-kpi-block {
  display: grid;
  gap: var(--bdna-space-sm);
}
.betdna-kpi-block.cols-3 { grid-template-columns: repeat(3, 1fr); }
.betdna-stat-block { text-align: center; }
.betdna-stat-label {
  display: block;
  font-size: var(--bdna-font-sm);
  color: var(--bdna-color-muted);
  text-transform: uppercase;
  letter-spacing: var(--bdna-letter-spacing-label);
}
.betdna-stat-value {
  display: block;
  font-size: var(--bdna-font-xl);
  font-weight: var(--bdna-font-weight-bold);
  color: var(--bdna-color-accent);
}
.betdna-stat-sub { font-size: var(--bdna-font-md); color: var(--bdna-color-muted); }
.betdna-trend-block {
  display: flex;
  flex-direction: column;
  gap: var(--bdna-space-2xs);
}
.betdna-trend-delta.pos { color: var(--bdna-color-positive); }
.betdna-trend-delta.neg { color: var(--bdna-color-negative); }
.betdna-badge {
  display: inline-block;
  font-size: var(--bdna-font-xs);
  font-weight: var(--bdna-font-weight-bold);
  padding: 2px 8px;
  border-radius: var(--bdna-radius-pill);
  letter-spacing: 0.03em;
}
.betdna-badge-status-ok { background: var(--bdna-success-bg); color: var(--bdna-success-text); border: 1px solid var(--bdna-success-border); }
.betdna-badge-status-warn { background: var(--bdna-warning-bg); color: var(--bdna-warning-text); border: 1px solid var(--bdna-warning-border); }
.betdna-badge-status-error { background: var(--bdna-danger-bg); color: var(--bdna-danger-text); border: 1px solid var(--bdna-danger-border); }
.betdna-badge-validation-pass { background: var(--bdna-success-bg); color: var(--bdna-success-text); border: 1px solid var(--bdna-success-border); }
.betdna-badge-validation-partial { background: var(--bdna-warning-bg); color: var(--bdna-warning-text); border: 1px solid var(--bdna-warning-border); }
.betdna-badge-validation-fail { background: var(--bdna-danger-bg); color: var(--bdna-danger-text); border: 1px solid var(--bdna-danger-border); }
.betdna-grid { display: grid; gap: var(--bdna-space-sm); }
.betdna-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.betdna-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) {
  .betdna-grid.responsive { grid-template-columns: 1fr; }
  .betdna-kpi-block.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.betdna-split-panel {
  display: grid;
  gap: var(--bdna-space-md);
}
@media (min-width: 768px) {
  .betdna-split-panel { grid-template-columns: 1fr 1fr; }
}
.betdna-expandable { margin-bottom: var(--bdna-space-sm); }
.betdna-inspector {
  border: var(--bdna-border-width) solid var(--bdna-border-color);
  border-radius: var(--bdna-radius-md);
  padding: var(--bdna-panel-padding);
  background: var(--bdna-color-bg);
}
.betdna-sticky-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bdna-color-surface);
  border-radius: var(--bdna-radius-md);
  padding: var(--bdna-space-sm) var(--bdna-panel-padding);
  margin-bottom: var(--bdna-space-md);
  box-shadow: var(--bdna-elevation-1);
}
.betdna-empty-state,
.betdna-loading-state,
.betdna-error-state {
  text-align: center;
  padding: var(--bdna-space-2xl);
  color: var(--bdna-color-muted);
}
.betdna-empty-title { font-weight: var(--bdna-font-weight-semibold); color: var(--bdna-color-text); margin-bottom: var(--bdna-space-sm); }
.betdna-banner {
  padding: var(--bdna-space-sm) var(--bdna-panel-padding);
  border-radius: var(--bdna-radius-md);
  margin-bottom: var(--bdna-section-gap);
  font-size: var(--bdna-font-md);
}
.betdna-banner-warn { background: rgba(245, 158, 11, 0.15); border: 1px solid var(--bdna-color-warn); }
.betdna-banner-info { background: rgba(59, 130, 246, 0.12); border: 1px solid var(--bdna-color-accent-2); }
.betdna-banner-error { background: rgba(239, 68, 68, 0.12); border: 1px solid var(--bdna-color-negative); }
.betdna-intelligence-card { /* extends .cockpit-card via dual class */ }
.betdna-tier-card { border-left: 3px solid var(--bdna-border-color); }
.betdna-tier-card.tier-platinum { border-left-color: #e5e4e2; }
.betdna-tier-card.tier-gold { border-left-color: #fbbf24; }
.betdna-tier-card.tier-silver { border-left-color: #94a3b8; }
.betdna-tier-card.tier-bronze { border-left-color: #b45309; }
.betdna-selection-card { /* extends .pred-card via dual class */ }

/* Icon sizing — ICON_LIBRARY.md */
.bdna-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.bdna-icon-xs { font-size: var(--bdna-icon-xs); width: var(--bdna-icon-xs); height: var(--bdna-icon-xs); }
.bdna-icon-sm { font-size: var(--bdna-icon-sm); width: var(--bdna-icon-sm); height: var(--bdna-icon-sm); }
.bdna-icon-md { font-size: var(--bdna-icon-md); width: var(--bdna-icon-md); height: var(--bdna-icon-md); }
.bdna-icon-lg { font-size: var(--bdna-icon-lg); width: var(--bdna-icon-lg); height: var(--bdna-icon-lg); }

/* Progress / meters — COMPONENT_LIBRARY.md */
.bdna-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  font-size: var(--bdna-font-sm);
}
.bdna-progress-label {
  grid-column: 1 / -1;
  color: var(--bdna-color-muted);
  text-transform: uppercase;
  letter-spacing: var(--bdna-letter-spacing-label);
  font-size: var(--bdna-font-xs);
}
.bdna-progress-track {
  height: 8px;
  border-radius: var(--bdna-radius-pill);
  background: var(--bdna-border-color);
  overflow: hidden;
}
.bdna-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bdna-color-accent);
}
.bdna-progress-positive .bdna-progress-fill { background: var(--bdna-color-positive); }
.bdna-progress-negative .bdna-progress-fill { background: var(--bdna-color-negative); }
.bdna-progress-warn .bdna-progress-fill { background: var(--bdna-color-warn); }
.bdna-progress-val {
  font-variant-numeric: tabular-nums;
  color: var(--bdna-color-muted);
  min-width: 2.5em;
  text-align: right;
}
.bdna-meter-strip {
  display: flex;
  flex-direction: column;
  gap: var(--bdna-space-sm);
}