/* ============================================================
   DENVER PIAZZA — COMPONENT LIBRARY
   Requires fonts.css + tokens.css. Class prefix: .dp-
   Signature components (Color Bar, Pill) match the Figma file 1:1.
   ============================================================ */

/* ---- Base ---- */
.dp, .dp * { box-sizing: border-box; }
.dp-body {
  margin: 0;
  background: var(--dp-bg);
  color: var(--dp-text);
  font-family: var(--dp-font-mono);
  font-size: var(--dp-body);
  line-height: var(--dp-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Layout ---- */
.dp-wrap { max-width: var(--dp-maxw); margin: 0 auto; padding: 0 var(--dp-gutter); }
.dp-row { display: flex; gap: var(--dp-space-3); align-items: center; flex-wrap: wrap; }
.dp-grid { display: grid; gap: var(--dp-space-5); }
.dp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dp-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .dp-grid-3, .dp-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dp-grid-2, .dp-grid-3, .dp-grid-4 { grid-template-columns: 1fr; } }

/* ---- Typography ---- */
.dp-display, .dp-h1, .dp-h2, .dp-h3 {
  font-family: var(--dp-font-display);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  color: var(--dp-text);
  margin: 0;
}
.dp-display { font-size: var(--dp-display); line-height: var(--dp-leading-display); letter-spacing: var(--dp-track-display); }
.dp-h1 { font-size: var(--dp-h1); line-height: var(--dp-leading-display); letter-spacing: var(--dp-track-display); }
.dp-h2 { font-size: var(--dp-h2); line-height: var(--dp-leading-heading); letter-spacing: var(--dp-track-h2); }
.dp-h3 { font-size: var(--dp-h3); line-height: 1.1; letter-spacing: -0.02em; }

/* mono label / eyebrow */
.dp-label, .dp-eyebrow {
  font-family: var(--dp-font-mono);
  font-weight: var(--dp-weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--dp-track-label);
  line-height: var(--dp-leading-label);
}
.dp-label { font-size: var(--dp-label); color: var(--dp-text); }
.dp-eyebrow { font-size: var(--dp-caption); letter-spacing: var(--dp-track-caption); color: var(--dp-leaf); }
.dp-body-text { font-family: var(--dp-font-mono); font-size: var(--dp-body); line-height: var(--dp-leading-body); }
.dp-caption { font-family: var(--dp-font-mono); font-size: var(--dp-caption); text-transform: uppercase; letter-spacing: var(--dp-track-caption); color: var(--dp-leaf); }
.dp-muted { color: var(--dp-leaf); }

/* ============================================================
   SIGNATURE: COLOR BAR  (Coral · Leaf · Sky · Lime)
   ============================================================ */
.dp-colorbar {
  display: flex;
  height: 32px;
  width: 100%;
  overflow: hidden;
}
.dp-colorbar > span { flex: 1 0 0; min-width: 1px; }
.dp-colorbar > span:nth-child(1) { background: var(--dp-coral); }
.dp-colorbar > span:nth-child(2) { background: var(--dp-leaf); }
.dp-colorbar > span:nth-child(3) { background: var(--dp-sky); }
.dp-colorbar > span:nth-child(4) { background: var(--dp-lime); }
.dp-colorbar--tall { height: 40px; }
.dp-colorbar--thin { height: 12px; }
/* single-element fallback using the gradient token */
.dp-colorbar--rule { height: 12px; width: 100%; background: var(--dp-bar); }

/* ============================================================
   SIGNATURE: PILL
   ============================================================ */
.dp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-lime);
  color: var(--dp-forest);
  font-family: var(--dp-font-mono);
  font-size: var(--dp-h3);            /* 24px, per Figma */
  line-height: var(--dp-leading-label);
  letter-spacing: var(--dp-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.dp-pill--leaf  { background: var(--dp-leaf);  color: var(--dp-forest); }
.dp-pill--coral { background: var(--dp-coral); color: var(--dp-forest); }
.dp-pill--sky   { background: var(--dp-sky);   color: var(--dp-forest); }
.dp-pill--forest{ background: var(--dp-forest);color: var(--dp-bone); }
.dp-pill--outline{ background: transparent; color: var(--dp-forest); box-shadow: inset 0 0 0 2px var(--dp-forest); }
.dp-pill--sm { padding: 8px 18px; font-size: var(--dp-caption); }

/* ---- Buttons (pill-shaped, mono caps) ---- */
.dp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--dp-font-mono);
  font-weight: var(--dp-weight-medium);
  font-size: var(--dp-body);
  text-transform: uppercase;
  letter-spacing: var(--dp-track-label);
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--dp-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dp-dur) var(--dp-ease), color var(--dp-dur) var(--dp-ease),
              border-color var(--dp-dur) var(--dp-ease), transform var(--dp-dur) var(--dp-ease);
}
.dp-btn:active { transform: translateY(1px); }
.dp-btn:focus-visible { outline: 3px solid var(--dp-focus); outline-offset: 3px; }
.dp-btn--primary { background: var(--dp-lime); color: var(--dp-forest); }
.dp-btn--primary:hover { background: #C7DA45; }
.dp-btn--forest { background: var(--dp-forest); color: var(--dp-bone); }
.dp-btn--forest:hover { background: var(--dp-forest-deep); }
.dp-btn--coral { background: var(--dp-coral); color: var(--dp-forest); }
.dp-btn--coral:hover { background: #F2854F; }
.dp-btn--outline { background: transparent; color: var(--dp-forest); border-color: var(--dp-forest); }
.dp-btn--outline:hover { background: var(--dp-forest); color: var(--dp-bone); }
.dp-btn--sm { padding: 10px 18px; font-size: var(--dp-caption); }
.dp-btn--lg { padding: 19px 36px; font-size: var(--dp-h3); }

/* ---- Cards ---- */
.dp-card {
  background: var(--dp-surface);
  border: var(--dp-border-default);
  border-radius: var(--dp-radius);
  padding: var(--dp-space-6);
}
.dp-card--bone { background: var(--dp-bone); }
.dp-card--forest { background: var(--dp-forest); color: var(--dp-bone); border-color: transparent; }
.dp-card--forest .dp-h3, .dp-card--forest .dp-h2 { color: var(--dp-bone); }
.dp-card--lime { background: var(--dp-lime); border-color: transparent; }
.dp-card--leaf { background: var(--dp-leaf); border-color: transparent; }
.dp-card--raised { box-shadow: var(--dp-shadow); border-color: transparent; }
/* color tab across the top of a card */
.dp-card--tab { position: relative; overflow: hidden; }
.dp-card--tab::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; }
.dp-card--tab.is-leaf::before  { background: var(--dp-leaf); }
.dp-card--tab.is-coral::before { background: var(--dp-coral); }
.dp-card--tab.is-sky::before   { background: var(--dp-sky); }
.dp-card--tab.is-lime::before  { background: var(--dp-lime); }
.dp-card .dp-h3 { margin: var(--dp-space-3) 0 var(--dp-space-2); }

/* ---- Swatch (brand board style) ---- */
.dp-swatch {
  position: relative;
  height: 150px;
  border-radius: var(--dp-radius);
  overflow: hidden;
  padding: 12px;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-family: var(--dp-font-mono);
  font-size: var(--dp-micro);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.dp-swatch .nm { font-weight: 400; }
.dp-swatch .hx { opacity: .9; }
.dp-swatch--bordered { border: var(--dp-border-default); }

/* ---- Badge / tag ---- */
.dp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--dp-radius-pill);
  padding: 5px 12px;
  font-family: var(--dp-font-mono);
  font-size: var(--dp-caption);
  text-transform: uppercase;
  letter-spacing: var(--dp-track-caption);
  background: var(--dp-leaf-tint);
  color: var(--dp-forest);
}
.dp-badge--lime  { background: var(--dp-lime-tint); }
.dp-badge--coral { background: var(--dp-coral-tint); }
.dp-badge--sky   { background: var(--dp-sky-tint); }

/* ---- Dotted/square list ---- */
.dp-list { list-style: none; padding: 0; margin: 0; font-family: var(--dp-font-mono); }
.dp-list li { position: relative; padding: 12px 0 12px 28px; border-top: var(--dp-border-default); font-size: var(--dp-body); }
.dp-list li:first-child { border-top: none; }
.dp-list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 12px; background: var(--dp-lime); }
.dp-list--coral li::before { background: var(--dp-coral); }
.dp-list--leaf li::before  { background: var(--dp-leaf); }

/* ---- Forms ---- */
.dp-field { display: block; margin-bottom: var(--dp-space-4); }
.dp-flabel {
  display: block; font-family: var(--dp-font-mono); font-size: var(--dp-caption);
  text-transform: uppercase; letter-spacing: var(--dp-track-caption);
  margin-bottom: var(--dp-space-2); color: var(--dp-forest);
}
.dp-input, .dp-textarea, .dp-select {
  width: 100%;
  font-family: var(--dp-font-mono); font-size: var(--dp-body); color: var(--dp-forest);
  background: var(--dp-white);
  border: 2px solid var(--dp-hairline);
  border-radius: var(--dp-radius-sm);
  padding: 13px 15px;
  transition: border-color var(--dp-dur) var(--dp-ease), box-shadow var(--dp-dur) var(--dp-ease);
}
.dp-input::placeholder, .dp-textarea::placeholder { color: #A9A39A; }
.dp-input:focus, .dp-textarea:focus, .dp-select:focus {
  outline: none; border-color: var(--dp-forest);
  box-shadow: 0 0 0 3px var(--dp-lime);
}
.dp-textarea { min-height: 120px; resize: vertical; }
.dp-help { font-family: var(--dp-font-mono); font-size: var(--dp-caption); color: var(--dp-leaf); margin-top: 6px; }

/* ---- Alerts ---- */
.dp-alert {
  display: flex; gap: var(--dp-space-3);
  border-radius: var(--dp-radius-sm);
  padding: var(--dp-space-4) var(--dp-space-5);
  font-family: var(--dp-font-mono); font-size: var(--dp-body);
  border-left: 6px solid var(--dp-forest);
  background: var(--dp-white);
}
.dp-alert--success { border-left-color: var(--dp-leaf); background: var(--dp-leaf-tint); }
.dp-alert--info    { border-left-color: var(--dp-sky);  background: var(--dp-sky-tint); }
.dp-alert--accent  { border-left-color: var(--dp-coral);background: var(--dp-coral-tint); }

/* ---- Nav ---- */
.dp-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--dp-space-4) 0; }
.dp-nav__links { display: flex; gap: var(--dp-space-6); align-items: center; }
.dp-nav__links a {
  color: var(--dp-forest); text-decoration: none;
  font-family: var(--dp-font-mono); font-size: var(--dp-caption);
  text-transform: uppercase; letter-spacing: var(--dp-track-caption);
}
.dp-nav__links a:hover { color: var(--dp-leaf); }
@media (max-width: 720px){ .dp-nav__links a:not(.dp-btn):not(.dp-pill){ display:none; } }

/* ---- Logo lockup (wordmark) ---- */
.dp-logo { display: inline-flex; align-items: center; gap: 10px; }
.dp-logo__word { font-family: var(--dp-font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.04em; color: var(--dp-forest); line-height: 1; }

/* ---- Sections ---- */
.dp-section { padding: var(--dp-space-9) 0; }
.dp-section--tight { padding: var(--dp-space-7) 0; }
.dp-divider { border: none; border-top: var(--dp-border-default); margin: 0; }

/* ---- Stat ---- */
.dp-stat__num { font-family: var(--dp-font-display); font-weight: 700; font-size: clamp(2.5rem,5vw,3.5rem); color: var(--dp-forest); line-height: .95; letter-spacing: -0.04em; }
.dp-stat__label { font-family: var(--dp-font-mono); font-size: var(--dp-caption); text-transform: uppercase; letter-spacing: var(--dp-track-caption); color: var(--dp-leaf); margin-top: 8px; }