/* components.css — utility classes built ON design-tokens.css. rp- prefixed to avoid
   clashing with styles.css. DEFINED here, not yet APPLIED to any element (D2–D5 apply
   them). Flat color fills only; no glass/blur effects; no flashy color. Values reference tokens. */

.rp-card {
  background: var(--rp-surface);
  border-radius: var(--rp-radius-card);
  padding: var(--rp-card-pad);
  box-shadow: var(--rp-shadow-1), var(--rp-shadow-2);
}
.rp-card-label {
  font-size: var(--rp-label-size);
  font-weight: var(--rp-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--rp-label-track);
  color: var(--rp-text-3);
}
.rp-metric-hero {
  font-size: var(--rp-hero-size);
  line-height: var(--rp-hero-line);
  font-weight: var(--rp-hero-weight);
  color: var(--rp-text-1);
  font-variant-numeric: tabular-nums;
}
.rp-metric-unit { font-size: var(--rp-caption-size); color: var(--rp-text-2); }
.rp-subline { font-size: var(--rp-caption-size); line-height: var(--rp-caption-line); color: var(--rp-text-2); }
.rp-value-mono { font-size: var(--rp-mono-size); font-variant-numeric: tabular-nums; }
.rp-tabular { font-variant-numeric: tabular-nums; }

.rp-badge {
  display: inline-block;
  border-radius: var(--rp-radius-chip);
  padding: var(--rp-space-1) var(--rp-space-2);
  font-size: var(--rp-label-size);
  font-weight: var(--rp-label-weight);
}
.rp-badge--low   { color: var(--rp-risk-low-fg);   background: var(--rp-risk-low-bg); }
.rp-badge--mod   { color: var(--rp-risk-mod-fg);   background: var(--rp-risk-mod-bg); }
.rp-badge--high  { color: var(--rp-risk-high-fg);  background: var(--rp-risk-high-bg); }
.rp-badge--vhigh { color: var(--rp-risk-vhigh-fg); background: var(--rp-risk-vhigh-bg); }

.rp-chip-warn {
  color: var(--rp-warn-fg); background: var(--rp-warn-bg);
  border-radius: var(--rp-radius-chip);
  padding: var(--rp-space-1) var(--rp-space-2);
  font-size: var(--rp-label-size); font-weight: var(--rp-label-weight);
}
.rp-ribbon-danger {
  color: var(--rp-danger-fg); background: var(--rp-danger-bg);
  font-weight: 700;
  padding: var(--rp-space-2) var(--rp-space-3);
  border-radius: var(--rp-radius-chip);
}
.rp-alert--amber {
  color: var(--rp-warn-fg); background: var(--rp-warn-bg);
  padding: var(--rp-space-2) var(--rp-space-4);
  border-radius: var(--rp-radius-chip);
}
.rp-alert--red {
  color: var(--rp-danger-fg); background: var(--rp-danger-bg);
  font-weight: 600;
  padding: var(--rp-space-2) var(--rp-space-4);
  border-radius: var(--rp-radius-chip);
}

.rp-grid-decisions {
  display: grid;
  gap: var(--rp-space-4);
  grid-template-columns: 1fr;
}
@media (min-width:768px)  { .rp-grid-decisions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1200px) { .rp-grid-decisions { grid-template-columns: repeat(4, 1fr); } }

/* deltas are neutral — a change, not a verdict */
.rp-delta--up   { color: var(--rp-text-2); }
.rp-delta--down { color: var(--rp-text-2); }
.rp-delta--flat { color: var(--rp-text-3); }

.rp-btn-primary {
  background: var(--rp-accent);
  color: #FFFFFF; /* no on-accent token exists */
  border: none;
  border-radius: var(--rp-radius-btn);
  padding: var(--rp-space-2) var(--rp-space-4);
  font: inherit; cursor: pointer;
}
.rp-btn-secondary {
  background: var(--rp-surface);
  color: var(--rp-accent);
  border: 1px solid var(--rp-hairline);
  border-radius: var(--rp-radius-btn);
  padding: var(--rp-space-2) var(--rp-space-4);
  font: inherit; cursor: pointer;
}

.rp-stack { display: flex; flex-direction: column; gap: var(--rp-space-4); }
.rp-section-gap { margin-top: var(--rp-space-6); }