/* ==========================================================================
   Page · K02 Color & Tokens
   ========================================================================== */

/* ---- Materials: swatch cards ------------------------------------------- */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.swatch {
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.swatch__chip {
  aspect-ratio: 4 / 3;
  background: var(--swatch);
  border-bottom: 1px solid var(--line);
}

.swatch__body {
  padding: 14px 14px 16px;
}

.swatch__name {
  margin-bottom: 6px;
  font: 700 22px/1 var(--f-display);
  text-transform: uppercase;
}

.swatch__codes {
  font: 400 12px/1.6 var(--f-mono);
  color: var(--ink-2);
}

.swatch__role {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---- Signals ------------------------------------------------------------ */

.signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.signal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--canvas);
}

.signal__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* large .signal-mark; documents the day-shift values, fixed in every theme */
.signal__shape {
  --mark-size: 28px;
  --sig-red: #C8102E;
  --sig-yellow: #E8AE00;
  --sig-green: #1E8A3C;
  --sig-white: #FFFFFF;
  --sig-blue: #0F4C9A;
}

.signal__word {
  font: 700 24px/1 var(--f-display);
  text-transform: uppercase;
}

.signal__token {
  font: 400 12px/1.6 var(--f-mono);
  color: var(--ink-2);
}

.signal__meaning {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---- Do / Don't cards --------------------------------------------------- */

.rule-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin-top: 24px;
}

.rule-card {
  padding: 20px;
  background: var(--canvas);
  border-top: 4px solid var(--rule-color);
}

.rule-card--do   { --rule-color: var(--sig-green); }
.rule-card--dont { --rule-color: var(--sig-red); }

.rule-card__verdict {
  margin-bottom: 10px;
  font: 600 12px/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--rule-color);
}

.rule-card__body {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.rule-card__note {
  font-size: 15px;
  color: var(--ink-2);
}

.rule-card__bad-headline {
  font: 700 22px/1 var(--f-display);
  color: var(--action);
  text-transform: uppercase;
}

/* static (non-interactive) button specimens */
.sample-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 14px/1 var(--f-text);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sample-btn--primary {
  padding: 0 20px;
  background: var(--action);
  color: var(--action-ink);
  clip-path: var(--chamfer-s);
}

.sample-btn--outline {
  padding: 0 16px;
  border: 1.5px solid var(--ink);
}

/* ---- Token architecture ------------------------------------------------- */

.token-layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border: 1px solid var(--line-strong);
  font: 400 13px/1.8 var(--f-mono);
}

.token-layer {
  padding: 20px;
  border-right: 1px solid var(--line-strong);
}

.token-layer:last-child {
  border-right: 0;
}

.token-layer--surface {
  background: var(--surface);
}

.token-layer__title {
  margin-bottom: 12px;
  font: 700 22px/1 var(--f-display);
  text-transform: uppercase;
}

/* ---- Themes ------------------------------------------------------------- */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  background: var(--canvas);
  color: var(--ink);
}

.theme-card__meta {
  display: flex;
  justify-content: space-between;
  font: 500 12px/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--ink-2);
}

.theme-card__claim {
  font: 800 44px/.9 var(--f-display);
  text-transform: uppercase;
}

.theme-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.theme-card .sample-btn--primary {
  padding: 0 18px;
}

/* nameplate card specimen */
.nameplate {
  padding: 6px;
  background: var(--surface);
  clip-path: var(--chamfer-m);
}

.nameplate__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-strong);
}

.nameplate__code {
  margin-bottom: 6px;
  font: 500 11px/1 var(--f-mono);
  color: var(--muted);
}

.nameplate__title {
  font: 700 22px/1 var(--f-display);
  text-transform: uppercase;
}

/* three-lamp stack light, bottom lamp lit */
.stock-lamp {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--f-mono);
}

.serial-field {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border: 1.5px solid var(--line-strong);
  background: var(--canvas);
}

.serial-field__label {
  font: 500 11px/1.4 var(--f-mono);
  color: var(--muted);
}

.serial-field__value {
  font: 500 17px/1.4 var(--f-mono);
}

/* ---- Contrast table ----------------------------------------------------- */

.intro--sm {
  margin-bottom: 24px;
}

.contrast-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-strong);
}

/* A real <table> for semantics; rows are laid out as grids so the
   fr-based column widths work (table cells can't do fr). */
.contrast-table,
.contrast-table thead,
.contrast-table tbody {
  display: block;
}

.contrast-table {
  min-width: 720px;
  font: 400 14px/1.3 var(--f-mono);
}

.contrast-table tr {
  display: grid;
  grid-template-columns: 70px 1.4fr 1.2fr 90px 100px 1.3fr;
  align-items: center;
}

.contrast-table thead tr {
  background: var(--surface);
}

.contrast-table tbody tr {
  border-top: 1px solid var(--line);
}

.contrast-table th {
  padding: 12px 14px;
  font-weight: 500;
  text-align: left;
}

.contrast-table td {
  padding: 10px 14px;
}

.contrast-table .num {
  text-align: right;
}

.contrast-table__theme {
  color: var(--muted);
}

.contrast-table__use {
  color: var(--ink-2);
  font-family: var(--f-text);
}

/* colors come from the row's data-fg / data-bg (set by k02-color.js) */
.contrast-sample {
  display: inline-block;
  padding: 6px 12px;
  font: 600 15px/1 var(--f-text);
  background: var(--sample-bg);
  color: var(--sample-fg);
}

.contrast-level {
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
}

/* ---- Data-viz palettes -------------------------------------------------- */

.palettes {
  display: grid;
  gap: 28px;
}

.palette__label {
  margin-bottom: 10px;
  font: 500 12px/1 var(--f-mono);
  color: var(--muted);
}

.palette-categorical {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.palette-categorical__chip {
  height: 56px;
  background: var(--swatch);
}

.palette-categorical__name {
  font: 400 11px/1.6 var(--f-mono);
  color: var(--ink-2);
}

.palette-ramp {
  display: flex;
  height: 40px;
}

.palette-ramp > span {
  flex: 1;
  background: var(--swatch);
}