/* Each palette also colours its thumbnail in the studio and builder. */
:is([data-design="midnight"], .swatch.midnight, .design-sheet.midnight) {
  --design-paper: #fdfbf8;
  --design-ink: #2b2345;
  --design-muted: #51436d;
  --design-rule: #d4cbe4;
  --design-tint: #eee8fa;
  --design-dark: #211934;
  --design-glow: #594379;
}
:is([data-design="sage"], .swatch.sage, .design-sheet.sage) {
  --design-paper: #fbfcf6;
  --design-ink: #20382c;
  --design-muted: #395848;
  --design-rule: #b9cebd;
  --design-tint: #e5efe1;
  --design-dark: #152d26;
  --design-glow: #3b6550;
}
:is([data-design="slate"], .swatch.slate, .design-sheet.slate) {
  --design-paper: #f9fbfd;
  --design-ink: #243852;
  --design-muted: #415a73;
  --design-rule: #becfe1;
  --design-tint: #e3edf9;
  --design-dark: #19283e;
  --design-glow: #3b5d85;
}
:is([data-design="classic"], .swatch.classic, .design-sheet.classic) {
  --design-paper: #fcfbf8;
  --design-ink: #26262a;
  --design-muted: #504e55;
  --design-rule: #ccc9ce;
  --design-tint: #edeaf0;
  --design-dark: #212127;
  --design-glow: #4a4856;
}
:is([data-design="copper"], .swatch.copper, .design-sheet.copper) {
  --design-paper: #fffaf4;
  --design-ink: #432921;
  --design-muted: #684034;
  --design-rule: #dfbca9;
  --design-tint: #f9e6d8;
  --design-dark: #3a211c;
  --design-glow: #764532;
}
:is([data-design="blueprint"], .swatch.blueprint, .design-sheet.blueprint) {
  --design-paper: #f7fbfe;
  --design-ink: #173e50;
  --design-muted: #375c6c;
  --design-rule: #afcbd8;
  --design-tint: #dceff6;
  --design-dark: #102c3a;
  --design-glow: #2c6077;
}
:is([data-design="linen"], .swatch.linen, .design-sheet.linen) {
  --design-paper: #fffdf7;
  --design-ink: #352d26;
  --design-muted: #675446;
  --design-rule: #d6c5af;
  --design-tint: #f4ebdc;
  --design-dark: #352922;
  --design-glow: #645344;
}
:is([data-design="signal"], .swatch.signal, .design-sheet.signal) {
  --design-paper: #fffdf6;
  --design-ink: #30281b;
  --design-muted: #594c33;
  --design-rule: #dbc898;
  --design-tint: #f8edc6;
  --design-dark: #312419;
  --design-glow: #674619;
}

/* The same paper layout renders in the sample studio, editor and PDFs. */
.document {
  --paper-gutter: clamp(12px, 4.4vw, 34px);
  box-sizing: border-box;
  width: 100%;
  max-width: 620px;
  min-width: 0;
  margin: 0 auto;
  padding: 0 var(--paper-gutter) var(--paper-gutter);
  border: 1px solid var(--design-rule);
  border-top: 4px solid var(--design-glow);
  border-radius: 2px;
  background: var(--design-paper);
  color: var(--design-ink);
  color-scheme: light;
  font-size: .85rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.document p { margin: 0; color: var(--design-muted); white-space: pre-wrap; }
.document .doc-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: var(--paper-gutter) 0 14px;
  border-bottom: 1px solid var(--design-rule);
}
.document .doc-heading { min-width: 0; }
.document .doc-header h3 {
  margin: 0;
  font: 400 clamp(1.85rem, 5.6vw, 3.3rem)/1.02 Georgia, serif;
  letter-spacing: -.04em;
  color: var(--design-ink);
}
.document .doc-brand,
.document h4 {
  color: var(--design-dark);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.document .doc-brand { margin: 0 0 6px; }
.document h4 { margin: 0 0 4px; }
.doc-meta { font-variant-numeric: tabular-nums; }
.doc-meta strong { display: block; }
.doc-content { padding-top: 16px; }
.doc-content > * + * { margin-top: 16px; }
.doc-parties, .doc-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.doc-dates { padding: 9px 0; border-block: 1px solid var(--design-rule); }
.doc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; text-align: left; }
.doc-table :is(th, td) { padding: 7px 4px; border-bottom: 1px solid var(--design-rule); vertical-align: top; }
.doc-table th { color: var(--design-dark); background: var(--design-tint); font-size: .72rem; }
.document[data-kind="invoice"] .doc-table th { background: transparent; border-bottom-width: 2px; }
.doc-table th:last-child, .doc-table td:last-child { text-align: right; }
.doc-table--charges :is(th,td):nth-child(n+2) { text-align: right; }
.doc-table--charges td:not(:first-child) { white-space: nowrap; }
.doc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  max-width: 280px;
  margin-left: auto;
  padding-top: 9px;
  border-top: 2px solid var(--design-glow);
  font-weight: 700;
}
.doc-total strong { font-size: 1.23rem; }
.doc-sample-mark { padding-top: 8px; border-top: 1px solid var(--design-rule); font-size: .7rem; }
.document .doc-sample-mark { margin-top: 20px; }

:is(.swatch, .design-sheet) {
  border-top: 3px solid var(--design-glow);
  background: linear-gradient(
    var(--design-paper) 0 29%,
    var(--design-rule) 29% 35%,
    var(--design-paper) 35% 55%,
    var(--design-tint) 55% 68%,
    var(--design-paper) 68% 79%,
    var(--design-glow) 79% 83%,
    var(--design-paper) 83%
  );
}

@media screen {
  .document {
    min-height: clamp(350px, 100vw, 670px);
    box-shadow: 0 3px 0 -1px var(--design-rule), 0 18px 36px #0d081f66;
  }
}
@media screen and (max-width: 420px) {
  .document { font-size: .77rem; }
  .document .doc-table :is(th, td) { padding-inline: 3px; font-size: .72rem; }
  .doc-table--charges td:not(:first-child) { white-space: normal; }
}
@media print {
  @page { size: A4; margin: 14mm; }
  :root { color-scheme: light; }
  body { background: white; }
  .document {
    --paper-gutter: 5mm;
    max-width: none;
    border-inline: 0;
    border-bottom: 0;
    font-size: 10.5pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .document .doc-header h3 { font-size: 29pt; }
  .doc-table thead { display: table-header-group; }
  .doc-header, .doc-table tr, .doc-parties, .doc-dates, .doc-block, .doc-total, .doc-signoff { break-inside: avoid; }
}