/* Shared styles for all preview cards */
@import url('../colors_and_type.css');

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

html, body {
  background: var(--bg-surface);
  color: var(--fg1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.frame {
  width: 700px;
  padding: 24px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.frame.violet { background: var(--bg-app); color: var(--fg-on-dark); }
.frame.ink    { background: var(--bg-app-deep); color: var(--fg-on-dark); }
.frame.cloud  { background: var(--bg-surface-2); }

.row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }

.swatch {
  flex: 1; min-width: 0; border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 86px; font-weight: 700; font-size: 13px; position: relative; overflow: hidden;
}
.swatch .name { font-size: 13px; font-weight: 700; }
.swatch .hex  { font-family: ui-monospace, 'SF Mono', monospace; font-size: 11px; font-weight: 600; opacity: 0.85; }
.swatch .var  { font-family: ui-monospace, 'SF Mono', monospace; font-size: 10px; opacity: 0.7; margin-top: 2px; }
.swatch.dark  { color: white; }
.swatch.light { color: var(--tr-ink); }

.label-eyebrow {
  font-weight: 700; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8E8E93;
}
.frame.violet .label-eyebrow,
.frame.ink .label-eyebrow { color: var(--tr-yellow); }