/* Shared base for design system preview cards — 700px wide */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

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

:root {
  --green-dark: #0f3321; --green: #1a4d33; --green-light: #2a6b4a;
  --gold: #c9a961; --gold-light: #e4cb8f;
  --paper: #faf5ec; --cream: #f5ece0; --cream-dark: #ebe0d0;
  --ink: #2a2a2a; --ink-soft: #5a5a5a; --ink-muted: #8a8a8a;
  --line: rgba(201, 169, 97, 0.25);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  padding: 20px;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: var(--serif); }

/* Common eyebrow */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ksf-green, var(--green));
}

/* Grid that fills the card */
.card-grid {
  display: grid;
  gap: 16px;
}