/* Preview card chrome — used by all preview/*.html cards */
@import url("../tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-cobalt-50);
  padding: var(--space-12);
  min-height: 100vh;
}

.card {
  background: var(--c-white);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  max-width: 1280px;
  margin: 0 auto;
  box-shadow: var(--shadow-2);
}

.card-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--c-cobalt-100);
}
.card-eyebrow {
  font-family: var(--conduction-typography-font-family-code);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cobalt-400);
}
.card-title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.card-subtitle {
  font-size: var(--fs-base);
  color: var(--c-cobalt-400);
  margin-left: auto;
  text-align: right;
  max-width: 40ch;
}

.section-label {
  font-family: var(--conduction-typography-font-family-code);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cobalt-400);
  margin: var(--space-12) 0 var(--space-4);
}
.section-label:first-child { margin-top: 0; }

.token { font-family: var(--conduction-typography-font-family-code); font-size: var(--fs-xs); color: var(--c-cobalt-400); }

.hex { clip-path: var(--hex-pointy-top); display: inline-block; }