/* Shared base for design-system preview cards.
   Each card is sized 700px wide; height varies. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Cormorant+Garamond:ital,wght@1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #F8FAFC;
  color: #0A1929;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card {
  width: 700px;
  min-height: 150px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card--dark { background: #122B5A; color: #FFFFFF; border: none; }
.card--deep { background: #0A1E45; color: #FFFFFF; border: none; }
.card--cream { background: #F2EBDA; border: none; color: #122B5A; }
.card--paper { background: #F8FAFC; }

.em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
}
.mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94A3B8;
}
.display {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}