/* MoAI Component Vocabulary — Claude Design handoff component utilities.
 * Source: SPEC-DESIGN-DOCS-V31-001 M2 (handoff README §3 component vocabulary:
 *         card variants, pill button, eyebrow, divider, hero/doc/install grids).
 * Token dependency: moai-brand.css (FROZEN v2-renewal SSOT, M1) — every color,
 *   radius, shadow, spacing, font, and weight below resolves to a --token; no
 *   hardcoded hex except the install-card's intentional dark surface (#141414)
 *   which is itself the --neutral-900 token but inlined for the contrast edge.
 * Light-only (REQ-DS-003): no [data-theme="dark"] selectors are introduced.
 *
 * Loading order (head/custom.html): moai-brand → moai-design → moai-docs-tokens
 *   → moai-docs-theme → moai-docs-layout → THIS FILE. Loading last lets the
 *   generic .cw-card utility below supersede the legacy .cw-card rules in
 *   moai-design.css (which are dead — no layout HTML references them; M2 audit
 *   verified via grep). The legacy child selectors (.cw-card .head / .icon /
 *   .count-pill / .foot) remain in moai-design.css as frozen dead code per
 *   AC-M1-001 (frozen dead code tolerated, NOT augmented).
 */

/* ── .cw-card — generic content surface card (README §3 Cards) ── */
.cw-card {
  background: var(--color-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform 150ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
              border-color 150ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
              box-shadow 150ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1));
}
.cw-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md, 0 12px 24px rgba(9, 17, 15, 0.06));
}

/* ── .cw-card-grid-3 — 3-column responsive grid for .cw-card layouts ── */
.cw-card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .cw-card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cw-card-grid-3 { grid-template-columns: 1fr; }
}

/* ── .cw-btn-pill — README §3.Protection Gradients vs Capsules pill button ──
 *   height 44px, radius pill, weight bold. Two variants via modifier:
 *   --primary (filled, white text) and --secondary (outlined, ink text).
 *   Hover: primary → signature glow; secondary → invert to primary fill. */
.cw-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-body);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
              border-color 150ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
              color 150ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
              box-shadow 150ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1));
}
.cw-btn-pill--primary {
  background: var(--color-primary);
  color: var(--fg-on-primary);
}
.cw-btn-pill--primary:hover {
  color: var(--fg-on-primary);
  box-shadow: var(--shadow-signature, 0 4px 32px rgba(61, 125, 95, 0.35));
  text-decoration: none;
}
.cw-btn-pill--secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--border-1);
}
.cw-btn-pill--secondary:hover {
  background: var(--color-primary);
  color: var(--fg-on-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

/* ── .cw-eyebrow — README §2 mono section tag (01 · TOKENOMICS pattern) ── */
.cw-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  color: var(--color-primary);
  text-transform: uppercase;
}

/* ── .cw-divider — 1px hairline rule between sections ── */
.cw-divider {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}

/* ── .cw-hero-grid — 2-column hero (copy | mascot aside), collapses to 1-col ── */
.cw-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 900px) {
  .cw-hero-grid { grid-template-columns: 1fr; }
}

/* ── .cw-doc-grid — 3-column responsive section-link grid (12-section home) ── */
.cw-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) {
  .cw-doc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cw-doc-grid { grid-template-columns: 1fr; }
}

/* ── .cw-install-card — README §3 hero install chip (intentional dark surface)
 *   Only place a hardcoded #141414 is permitted: it IS --neutral-900 but kept
 *   inline to lock the contrast against the light hero canvas. */
.cw-install-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: #141414;  /* = --neutral-900; intentional dark surface, NOT a token-port regression */
  color: var(--neutral-100);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.cw-install-card .dollar { color: var(--color-primary); }
.cw-install-card code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}