@import "tailwindcss";

.dmb-page {
  --kami-paper: #f7f1e3;
  --kami-ink-blue: #1f3a5f;
  --kami-ink: #2f2a24;
  --kami-rule: #e4d5bd;
  --dmb-accent: var(--kami-ink-blue);
  --dmb-accent-contrast: #fffaf0;
  --dmb-link: #375f8e;
  --dmb-muted: #6b5f4f;
  --dmb-bg: #fffaf0;
  --dmb-radius-xs: 4px;
  --dmb-radius-control: 6px;
  --dmb-radius-card: 4px;
  --dmb-radius-preview: 0px;
  --dmb-radius-pill: 9999px;
  --dmb-border: var(--kami-rule);
  --dmb-border-sample-bg: var(--kami-paper);
  --dmb-spacing-xs: 6px;
  --dmb-spacing-sm: 10px;
  --dmb-spacing-md: 16px;
  --dmb-spacing-lg: 24px;
  --dmb-spacing-xl: 36px;
  --dmb-spacing-section: 64px;
  --dmb-font-display: Charter, Georgia, "Times New Roman", serif;
  --dmb-font-body: TsangerJinKai02, Charter, Georgia, serif;
  --dmb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--kami-ink);
  font-family: var(--dmb-font-body);
}

.kami-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.kami-resource-grid-templates {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kami-paper-button,
.kami-editorial-card,
.kami-spec-table,
.kami-template {
  border: 1px solid var(--kami-rule);
  background: var(--kami-paper);
  color: var(--kami-ink);
  box-shadow: 0 14px 36px rgba(31, 58, 95, 0.1);
}

.kami-paper-button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  color: #fffaf0;
  background: var(--kami-ink-blue);
  font-weight: 700;
}

.kami-editorial-card,
.kami-template {
  padding: 18px;
  border-radius: 4px;
}

.kami-editorial-card small,
.kami-template small {
  color: var(--kami-ink-blue);
  font-family: var(--dmb-font-mono);
  text-transform: uppercase;
}

.kami-editorial-card h3,
.kami-template h3 {
  margin: 8px 0;
  font-family: var(--dmb-font-display);
}

.kami-spec-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 4px;
  overflow: hidden;
}

.kami-spec-table th,
.kami-spec-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--kami-rule);
  text-align: left;
}

.kami-spec-table th {
  color: var(--kami-ink-blue);
  font-family: var(--dmb-font-mono);
}
