/* design-system.css — Aurevix Engineering
   Styles used only by design-system.html. The documented components
   themselves come from components.css; nothing here restyles them. */

.ds-nav {
  position: sticky;
  inset-block-start: calc(4.5rem + var(--sp-4));
  align-self: start;
}
.ds-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.ds-nav li { margin: 0; }
.ds-nav a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
  text-decoration: none;
  border-inline-start: 2px solid var(--c-rule);
}
.ds-nav a:hover { color: var(--c-ink); border-inline-start-color: var(--c-mark); }

.ds-layout { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 64rem) {
  .ds-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
}

.ds-section { padding-block-start: var(--sp-8); }
.ds-section:first-child { padding-block-start: 0; }
.ds-section + .ds-section { border-block-start: var(--sp-rule) solid var(--c-rule); }

.ds-h { margin-block-end: var(--sp-5); }
.ds-h h2 { margin: 0 0 var(--sp-2); }
.ds-h p { color: var(--c-ink-2); margin: 0; max-width: var(--ms-body); }

/* --- Swatches ------------------------------------------------------------ */
.swatches { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.swatch {
  border: var(--sp-rule) solid var(--c-rule);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--c-surface);
}
.swatch__chip { block-size: 66px; border-block-end: var(--sp-rule) solid var(--c-rule); }
.swatch__meta { padding: var(--sp-3); display: grid; gap: 2px; }
.swatch__name { font-family: var(--ff-mono); font-size: var(--fs-2xs); color: var(--c-ink); }
.swatch__val { font-family: var(--ff-mono); font-size: var(--fs-3xs); color: var(--c-ink-3); text-transform: uppercase; }
.swatch__ratio { font-family: var(--ff-mono); font-size: var(--fs-3xs); }
.ratio-pass { color: var(--c-ok); }
.ratio-large { color: var(--c-warn); }
.ratio-fail { color: var(--c-danger); }

/* Discipline reference row */
.disc-table { display: grid; gap: 0; }
.disc-row {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 8rem 1fr;
  align-items: start;
  padding-block: var(--sp-4);
  border-block-start: var(--sp-rule) solid var(--c-rule);
}
.disc-row:last-child { border-block-end: var(--sp-rule) solid var(--c-rule); }
@media (min-width: 52rem) { .disc-row { grid-template-columns: 8rem 7rem 1fr; } }
.disc-swatch { display: flex; align-items: center; gap: var(--sp-3); }
.disc-swatch i { inline-size: 22px; block-size: 22px; border-radius: var(--r-2); background: var(--c-accent); flex: none; }
.disc-swatch b { font-family: var(--ff-display); font-size: var(--fs-base); }
.disc-use { font-size: var(--fs-sm); color: var(--c-ink-2); }

/* --- Type specimens ------------------------------------------------------ */
.type-row {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  grid-template-columns: 1fr;
  padding-block: var(--sp-4);
  border-block-start: var(--sp-rule) solid var(--c-rule);
  align-items: baseline;
}
@media (min-width: 46rem) { .type-row { grid-template-columns: 9rem minmax(0, 1fr); } }
.type-row:last-child { border-block-end: var(--sp-rule) solid var(--c-rule); }
.type-meta { font-family: var(--ff-mono); font-size: var(--fs-3xs); color: var(--c-ink-3); letter-spacing: var(--ls-wide); }
.type-sample { margin: 0; overflow-wrap: anywhere; }

/* --- Space scale --------------------------------------------------------- */
.space-row { display: grid; grid-template-columns: 5rem 1fr; gap: var(--sp-4); align-items: center; padding-block: var(--sp-2); }
.space-bar { block-size: 14px; background: var(--c-mark); border-radius: var(--r-1); }

/* --- Component demo tiles ------------------------------------------------ */
.demo {
  border: var(--sp-rule) solid var(--c-rule);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--c-surface);
}
.demo__stage {
  padding: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-surface-2);
}
.demo__stage--stack { flex-direction: column; align-items: stretch; }
.demo__note {
  padding: var(--sp-3) var(--sp-4);
  border-block-start: var(--sp-rule) solid var(--c-rule);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
}
.demo-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

/* Forced states — so a static page can show hover and focus, which otherwise
   only exist under a live pointer. These classes duplicate the real rules;
   if a component's states change, update both. */
.is-demo-hover.btn { background: var(--c-btn-hover); transform: translateY(-1px); }
.is-demo-focus { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-2); }
.is-demo-focus.input { box-shadow: 0 0 0 4px var(--c-focus-halo); outline-offset: 1px; }

.state-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
  display: block;
  margin-block-end: var(--sp-2);
}

/* --- Motion demo --------------------------------------------------------- */
.motion-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.motion-card { border: var(--sp-rule) solid var(--c-rule); border-radius: var(--r-3); padding: var(--sp-4); background: var(--c-surface); }
.motion-track {
  position: relative;
  block-size: 30px;
  margin-block: var(--sp-3);
  border-block-end: var(--sp-rule) dashed var(--c-rule-strong);
}
.motion-dot {
  position: absolute;
  inset-block-start: 7px;
  inline-size: 16px; block-size: 16px;
  border-radius: var(--r-pill);
  background: var(--c-mark);
  animation: motion-run 2.4s infinite;
  animation-timing-function: var(--ease-demo, linear);
}
@keyframes motion-run {
  0%, 8% { inset-inline-start: 0; }
  50%, 58% { inset-inline-start: calc(100% - 16px); }
  100% { inset-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-dot { animation: none; inset-inline-start: calc(50% - 8px); }
}

/* --- Rules list ---------------------------------------------------------- */
.rules { display: grid; gap: var(--sp-5); }
.rule-item {
  display: grid;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-5);
  border-inline-start: 3px solid var(--c-mark);
}
.rule-item h3 { margin: 0; font-size: var(--fs-md); }
.rule-item p { margin: 0; color: var(--c-ink-2); font-size: var(--fs-sm); }

.ds-code {
  display: block;
  padding: var(--sp-4);
  background: var(--c-sunken);
  border: var(--sp-rule) solid var(--c-rule);
  border-radius: var(--r-2);
  font-size: var(--fs-2xs);
  line-height: 1.7;
  color: var(--c-ink-2);
  overflow-x: auto;
  white-space: pre;
}

/* --- Logo lockups -------------------------------------------------------- */
.logo-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.logo-tile {
  border: var(--sp-rule) solid var(--c-rule);
  border-radius: var(--r-3);
  padding: var(--sp-6);
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  min-block-size: 11rem;
  background: var(--c-surface);
}
.logo-tile--dark { background: #0b0f14; color: #e9eef4; border-color: #242d38; }
.logo-tile--light { background: #f6f5f1; color: #12161a; border-color: #dcd9d1; }
.logo-tile__cap {
  font-family: var(--ff-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0.6;
}