/* Design-system reference

   Sections: Reference-page layout / Return navigation / Typography specimens / Specimen
   layout / Color swatches / Text and surface samples / Spacing samples / Project-card
   specimens / Button specimens.
   Responsive overrides stay beside their component in cascade order. */
@import "./reset.css";
@import "./theme.css";
@import "./components/project-card.css";
@import "./components/testimonial.css";
@import "./components/dialog.css";
@import "./components/editorial.css";

/* Specimen placement; component appearance stays in the production styles. */
.system-reference .editorial-specimen { margin-block: 2rem; }
.system-reference .editorial-specimen h3 { font-size: var(--font-size-24); }

/* ==========================================================================
   Reference-page layout
   ========================================================================== */
.system-reference {
  padding: 4rem 0;
  color: var(--color-text-primary);
  box-shadow: inset 0 -1px var(--color-border-section);
}

.system-header { margin-bottom: 3rem; }
.system-divider {
  width: 100%;
  margin: 0 0 3rem;
  border: 0;
  border-top: 1px solid var(--color-border-muted);
}
.system-reference .system-eyebrow {
  margin-bottom: 1rem;
  font: var(--font-weight-semibold) var(--font-size-13)/1.5 var(--font-family-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.system-header h1 { margin-bottom: 1rem; }
.system-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
.system-sidebar {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  padding-right: 1rem;
}
.system-sidebar > summary {
  min-height: 44px;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  cursor: pointer;
  font: var(--font-weight-semibold) var(--font-size-16)/1.5 var(--font-family-label);
}
.system-sidebar[open] > summary { display: none; }
.system-nav {
  position: static;
  padding: 0;
  background: transparent;
  box-shadow: none;
  z-index: auto;
}
.system-nav__group + .system-nav__group { margin-top: 2rem; }
.system-reference .system-nav__label {
  margin: 0 0 0.5rem;
  padding-inline: 1rem;
  color: var(--color-text-secondary);
  font: var(--font-weight-semibold) var(--font-size-13)/1.5 var(--font-family-label);
}
.system-nav ul { margin: 0; padding: 0; list-style: none; }
.system-nav a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border-radius: 0;
  color: var(--color-text-primary);
  font: var(--font-weight-semibold) var(--font-size-16)/1.4 var(--font-family-label);
}
.system-nav a:hover { background: var(--color-surface-subtle); }
.system-nav a:focus-visible { outline-offset: -3px; }
.system-nav a[aria-current="location"] {
  background: var(--color-surface-accent);
  color: var(--color-text-accent);
  box-shadow: inset 3px 0 currentColor;
}
.system-topics { min-width: 0; }
.system-topic {
  min-width: 0;
  scroll-margin-top: 96px;
}
.system-reference .system-topic > h2 { margin-top: 0; }
.system-topic > p { margin-bottom: 1.5rem; }
.system-topic > h2:focus { outline: none; }
.system-topic > h2:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Native fragment navigation works before/without JavaScript. Older browsers
   without :has() retain the full reference and its ordinary anchor links. */
@supports selector(:has(*)) {
  .system-topic { display: none; }
  .system-topic:first-child { display: block; }
  :where(.system-topics:has(.system-topic:target, .system-topic :target)) > .system-topic:first-child { display: none; }
  .system-topic:target, .system-topic:has(:target) { display: block; }
}
.system-topic[data-active] { display: block; }
.system-topic[hidden] { display: none !important; }

@media (max-width: 900px) {
  .system-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .system-sidebar {
    position: static;
    max-height: none;
    padding: 0;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-card);
  }
  .system-sidebar > summary {
    display: list-item;
  }
  .system-sidebar[open] > summary { display: list-item; }
  .system-sidebar summary span { margin-left: 1rem; color: var(--color-text-secondary); }
  .system-nav { padding: 0 1rem 1rem; max-height: 60vh; max-height: 60dvh; overflow-y: auto; }
  .system-topic { scroll-margin-top: 120px; }
  .system-header h1 { font-size: var(--font-size-36); }
}

@media (forced-colors: active) {
  .system-nav a[aria-current="location"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ==========================================================================
   Return navigation
   ========================================================================== */
.system-reference .back-link {
  font-family: var(--font-family-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  position: relative;
  font-size: var(--font-size-16);
  display: inline-block;
}

@media screen and (max-width: 320px) {
  .system-reference .back-link {
    font-size: var(--font-size-14);
  }
}

.system-reference .back-link::after {
  /* Appearance */
  content: '';

  /* Positioning */
  position: absolute;

  /* Sizing and spacing */
  width: 100%;

  /* Appearance */
  opacity: 0;

  /* Sizing and spacing */
  height: 3px;

  /* Positioning */
  bottom: -6px;
  left: 0;

  /* Appearance */
  background-color: var(--color-text-primary);

  /* Motion */
  transition: opacity var(--motion-duration-interaction) var(--motion-easing-decelerate);
}

.system-reference .back-link:hover::after,
.system-reference .back-link:focus::after {
  opacity: 1;
}

/* ==========================================================================
   Typography specimens
   ========================================================================== */
.system-reference h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}

.system-reference h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  margin: 3rem 0 1.5rem;
}

.system-reference p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  max-width: 65ch;
}

/* ==========================================================================
   Specimen layout
   ========================================================================== */
.system-reference .samples {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: start;
}

.system-reference .samples-colors {
  align-items: stretch;
}

.system-reference .samples-components {
  align-items: center;
}

/* ==========================================================================
   Color swatches
   ========================================================================== */
.system-reference .swatch {
  font-family: var(--font-family-label);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  padding: 1.5rem;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-card);
  min-width: 160px;
}

.system-reference .swatch-label {
  display: block;
  color: var(--swatch-label-color, var(--color-text-secondary));
  font-weight: var(--font-weight-semibold);
}

.system-reference .swatch code {
  font-weight: var(--font-weight-regular);
}

/* ==========================================================================
   Text and surface samples
   ========================================================================== */
.system-reference .sample-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.system-reference .sample-label {
  font-family: var(--font-family-label);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Spacing samples
   ========================================================================== */
.system-reference .space-sample {
  height: 1rem;
  background: var(--color-accent);
}

/* ==========================================================================
   Project-card specimens
   ========================================================================== */
.system-reference .project-specimens {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  gap: 2.5rem;
}

@media only screen and (max-width: 700px) {
  .system-reference .project-specimens {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Button specimens
   ========================================================================== */
.system-reference .button-specimen {
  padding: 2rem;
  margin-block: 1rem;
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.system-reference .button-specimen h3 {
  font-family: var(--font-family-label);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 1rem;
}

.system-reference .button-specimen.button--on-dark {
  background: var(--color-surface-contrast);
  color: var(--color-text-inverse);
}

.system-reference .button-specimen.button--on-accent {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}


/* Consumer documentation: specimens, specifications, and token relationships. */
.system-topic > h3 {
  margin: 3rem 0 1.5rem;
  font-size: var(--font-size-22);
}
.system-reference .reference-list {
  display: grid;
  gap: 1rem;
  padding-left: 2rem;
  font: var(--font-size-body)/var(--line-height-body) var(--font-family-body);
  margin-bottom: 2rem;
}
.token-hierarchy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0;
  margin: 2rem 0;
  list-style: none;
}
.token-hierarchy li { min-width: 0; padding: 1.5rem; border-top: 3px solid var(--color-accent); background: var(--color-surface-subtle); }
.token-hierarchy h3 { margin-bottom: 1rem; font-size: var(--font-size-18); }
.system-reference .token-hierarchy p { margin-bottom: 1rem; font-size: var(--font-size-16); }
.token-hierarchy code { font-size: var(--font-size-14); }
.token-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.token-chain code { padding: 0.5rem 1rem; }
.reference-table-scroll {
  max-width: 100%;
  max-height: 480px;
  overflow: auto;
  margin: 1.5rem 0 3rem;
  border: 1px solid var(--color-border-muted);
  scrollbar-gutter: stable;
}
.reference-table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--font-size-14)/1.5 var(--font-family-label);
  color: var(--color-text-primary);
}
.reference-table caption { padding: 1.5rem; text-align: left; background: var(--color-surface-subtle); font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); }
.reference-table th, .reference-table td { padding: 1.25rem 1.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border-muted); overflow-wrap: anywhere; }
.reference-table th:first-child { width: 30%; }
.reference-table th { font-weight: var(--font-weight-semibold); }
.reference-table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface); border-bottom: 2px solid var(--color-border-muted); }
.reference-table tbody tr:last-child > * { border-bottom: 0; }
.reference-table code { font-size: var(--font-size-13); background: none; padding: 0; }
.token-value { display: flex; align-items: center; gap: 0.75rem; }
.token-swatch { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid var(--color-border-muted); }
.token-source, .token-purpose { display: block; margin-top: 0.5rem; font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.token-source { font-size: var(--font-size-13); }
.type-specimens { display: grid; gap: 2rem; }
.type-specimen { padding: 2rem 0; border-bottom: 1px solid var(--color-border-muted); min-width: 0; }
.type-specimen h4 { font: var(--font-weight-semibold) var(--font-size-16)/1.5 var(--font-family-label); color: var(--color-text-secondary); }
.system-reference .type-specimen__sample {
  margin: 1.5rem 0;
  font-family: var(--type-family);
  font-size: var(--type-size);
  font-weight: var(--type-weight);
  line-height: var(--type-leading);
  overflow-wrap: anywhere;
}
.type-specimen__tokens { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.type-specimen__tokens code { font-size: var(--font-size-13); }
.system-reference .type-specimen__note { margin-top: 1rem; font: var(--font-size-14)/1.5 var(--font-family-label); color: var(--color-text-secondary); }
.testimonial-specimen { width: 100%; max-width: 560px; margin-bottom: 3rem; }
.spacing-specimens { margin-block: 2rem; gap: 2rem !important; }
.spacing-specimens .space-sample { margin-top: 0.75rem; }
.footer-specimen { display: block; box-sizing: border-box; width: 100%; height: 900px; border: 1px solid var(--color-border-muted); margin-bottom: 2rem; }
.cursor-specimens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.cursor-specimen { min-width: 0; padding: 2rem; border: 1px solid var(--color-border-muted); background: var(--color-surface); }
.cursor-specimen img { display: block; width: 72px; height: 72px; object-fit: contain; margin-bottom: 1rem; }
.cursor-specimen h3 { font-size: var(--font-size-18); margin-bottom: 0.75rem; }
.cursor-specimen code { font-size: var(--font-size-14); }
.system-reference .cursor-specimen p { margin-top: 1rem; font: var(--font-size-14)/1.5 var(--font-family-label); color: var(--color-text-secondary); }
.cursor-text-label { display: block; margin-bottom: 0.5rem; font-family: var(--font-family-label); }
.cursor-text-example { box-sizing: border-box; width: 100%; max-width: 560px; min-height: 44px; padding: 1rem; border: 1px solid var(--color-border-muted); color: var(--color-text-primary); background: var(--color-surface); font: var(--font-size-16)/1.5 var(--font-family-body); }
.motion-demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.motion-demo { padding: 2rem; border: 1px solid var(--color-border-muted); min-width: 0; }
.motion-demo h4 { font-size: var(--font-size-18); }
.system-reference .motion-demo p { font: var(--font-size-16)/1.5 var(--font-family-label); margin-bottom: 1rem; }
.motion-demo p code { font-size: var(--font-size-13); }
.motion-demo__track { display: flex; align-items: center; min-height: 90px; }
.motion-demo__object { display: block; width: 48px; height: 48px; background: var(--color-accent); border-radius: var(--radius-card); }
@media (prefers-reduced-motion: no-preference) {
  [data-motion-object="fadeUp"].is-playing { animation: fadeUp var(--demo-duration) var(--demo-easing); }
  [data-motion-object="fadeIn"].is-playing { animation: fadeIn var(--demo-duration) var(--demo-easing); }
}
@media (max-width: 1100px) { .token-hierarchy { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .cursor-specimens, .motion-demos { grid-template-columns: minmax(0, 1fr); }
  .reference-table { min-width: 600px; }
}