/* Design system page (/design-systems). Uses only site tokens. */

.ds { padding: var(--space-12) 0 var(--space-24); }
.ds .site-container { max-width: 960px; }

.ds-intro { max-width: 680px; margin-bottom: var(--space-8); }
.ds-eyebrow { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ds-intro h1 { margin: var(--space-2) 0 var(--space-4); }
.ds-lead { font-size: var(--text-lg); line-height: 1.6; color: var(--text-secondary); }
.ds-links { display: flex; gap: var(--space-6); font-size: var(--text-sm); font-weight: 600; }

.ds-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-12);
  border-bottom: var(--border-1) solid var(--border-light);
}
.ds-toc a { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--gray-100); box-shadow: none; font-size: var(--text-sm); font-weight: 600; }
.ds-toc a:hover { background: var(--signal-yellow); box-shadow: none; color: var(--text-on-yellow); }

.ds-section { margin-bottom: var(--space-16); scroll-margin-top: var(--space-24); }
.ds-section h2 { margin: 0 0 var(--space-3); }
.ds-section h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-base); }
.ds-note { max-width: 640px; margin: 0 0 var(--space-6); color: var(--text-secondary); }
.ds-note code, .ds-scale-label, .ds-swatch-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ds-note code { font-size: .9em; }

/* Color */
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-4); }
.ds-swatch { display: grid; gap: var(--space-1); align-content: start; }
.ds-swatch-chip {
  display: grid;
  place-items: center;
  height: 72px;
  margin-bottom: var(--space-1);
  border: var(--border-1) solid var(--border-light);
  border-radius: var(--radius-surface);
  font-weight: 700;
}
.ds-swatch-name { font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); }
.ds-swatch-meta { font-size: var(--text-xs); color: var(--text-muted); }
.ds-badge { justify-self: start; margin-top: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--gray-100); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }

.ds-ramp { display: grid; grid-template-columns: repeat(10, 1fr); border-radius: var(--radius-surface); overflow: hidden; border: var(--border-1) solid var(--border-light); }
.ds-ramp-step { display: grid; align-items: end; height: 64px; padding: var(--space-2); font-size: var(--text-xs); font-weight: 600; }
/* The gray scale flips in dark mode, so the label ink flips with it: page ink on the first five steps, page color on the rest */
.ds-ramp-step:nth-child(-n+5) { color: var(--text-primary); }
.ds-ramp-step:nth-child(n+6) { color: var(--background-primary); }

/* Type */
.ds-type-roles { display: grid; gap: var(--space-6); }
.ds-type-role { padding-bottom: var(--space-6); border-bottom: var(--border-1) solid var(--border-light); }
.ds-type-role p { margin: 0; }
.ds-type-sample { font-size: var(--text-4xl); line-height: 1.15; color: var(--text-primary); margin-bottom: var(--space-2) !important; }
.ds-scale { display: grid; gap: var(--space-2); }
.ds-scale-row { display: grid; grid-template-columns: 180px 1fr; align-items: baseline; gap: var(--space-4); }
.ds-scale-label { font-size: var(--text-xs); color: var(--text-muted); }
.ds-scale-sample { line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Space and shape */
.ds-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.ds-two h3:first-child { margin-top: 0; }
.ds-space-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.ds-space-bar { height: 12px; border-radius: var(--radius-base); background: var(--signal-yellow); }
.ds-radii { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ds-radius { display: grid; justify-items: center; gap: var(--space-2); }
.ds-radius-box { width: 64px; height: 64px; background: var(--background-secondary); border: var(--border-1) solid var(--border-medium); }
.ds-radius-box--shadow { border-color: transparent; border-radius: var(--radius-surface); }

/* Components */
.ds-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.ds-demo-text { max-width: 640px; }
.ds-code {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  overflow-x: auto;
  border-radius: var(--radius-control);
  background: var(--background-secondary);
  border: var(--border-1) solid var(--border-light);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.ds-form { display: grid; gap: var(--space-2); max-width: 360px; }
.ds-form .form-label { margin: var(--space-2) 0 0; }
.ds-checks { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--space-2) var(--space-6); margin-top: var(--space-3); font-size: var(--text-sm); }
.ds-checks label { display: inline-flex; align-items: center; gap: var(--space-2); }


/* Home tile demo: same classes, smaller */
.ds-feature-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.ds-feature-tiles .feature-tile { min-height: 300px; padding: var(--space-8) var(--space-4) 0; }
.ds-feature-tiles .feature-tile-title { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.05; }
.ds-feature-tiles .feature-tile-line { display: block; font-size: var(--text-sm); }
.ds-feature-tiles .feature-tile-cta { justify-self: center; }
.ds-feature-tiles .feature-tile-icon { width: 72px; height: 72px; }

/* Work tile demo: the More work context without its divider */
.ds-more-work { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: var(--space-4); }

/* Comics demo: three panels across, page squares start at the left */
.ds-comics { --strip-columns: 3; justify-content: flex-start; max-width: 720px; margin-top: var(--space-8); }
.ds-comic-nav { margin: 0; justify-content: flex-start; }

/* Theming demo: same classes, Office Badger's token values */
.ds-theme { padding: var(--space-6); border-radius: var(--radius-surface); background: var(--background-secondary); border: var(--border-1) solid var(--border-light); }
.ds-theme .ds-demo { margin: var(--space-3) 0 0; }
.ds-theme--badger {
  --primary-400: #F5B82E;
  --primary-500: #E5A61F;  /* Office Badger amber, deeper step */
  --btn-soft-bg: #EFE8DA;
  --btn-soft-bg-hover: #E3DACA;
  --text-primary: #1a1a1a;  /* Office Badger is a light app, so its demo keeps light ink */
  --text-muted: #666666;  /* 5:1 on the Badger paper */
  --background-secondary: #ffffff;
  --border-light: #D9CFBC;
  background: #FAF6EE;
  border-color: #D9CFBC;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .ds { padding-top: var(--space-6); }
  .ds-two { grid-template-columns: 1fr; }
  .ds-feature-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-comics { --strip-columns: 2; }
  .ds-scale-row { grid-template-columns: 1fr; gap: 0; }
  .ds-ramp { grid-template-columns: repeat(5, 1fr); }
}

/* Work tile demo uses spans; give the title its block layout */
.ds-more-work .work-tile-title { display: block; }

/* Content */
.ds-prose { max-width: 680px; }
.ds-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: none; }
.ds-panels .project-group { margin: 0; }
.ds-panels .project-group-image { aspect-ratio: 4/3; }
@media (max-width: 640px) { .ds-panels { grid-template-columns: 1fr; } }

/* Apps: the first card shows its hover state at rest */
.ds-apps { margin-top: 0; max-width: 720px; }
.ds-app-lit::before { background: var(--ai-gradient); animation: ai-spin 2.5s linear infinite; }
.ds-app-lit::after { inset: var(--border-2); }
@media (prefers-reduced-motion: reduce) { .ds-app-lit::before { animation: none; } }
.ds-code + .ds-note { margin-top: var(--space-4); }