@layer utilities {
  .row { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
  .row.center { align-items: center; }
  .col { display: flex; flex-direction: column; gap: var(--s3); }

  /* Design system preview — doc typography */
  .section { margin-bottom: var(--s16); }
  .section-title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    color: var(--ink-950);
    line-height: 1.1;
    margin-bottom: var(--s2);
  }
  .section-subtitle {
    font-size: 15px;
    color: var(--color-text-muted);
    margin-bottom: var(--s8);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--s6);
  }
  .subsection { margin-bottom: var(--s10); }
  .subsection-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: var(--s4);
  }

  /* Design system preview — type specimens */
  .type-specimen { margin-bottom: var(--s6); }
  .type-display-xl { font-family: var(--font-display); font-size: 56px; font-weight: 400; line-height: 1.05; color: var(--ink-950); letter-spacing: -.01em; }
  .type-display-lg { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.1; color: var(--ink-950); }
  .type-display-md { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2; color: var(--ink-950); }
  .type-heading-lg { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink-950); }
  .type-heading-md { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink-950); }
  .type-heading-sm { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-800); }
  .type-body-lg { font-size: 17px; font-weight: 400; line-height: 1.65; color: var(--ink-800); }
  .type-body { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--ink-600); }
  .type-small { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink-600); }
  .type-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }
  .type-mono { font-family: var(--font-mono); font-size: 13px; color: var(--forest-700); }

  /* Design system preview — demo helpers */
  .demo-label { font-size: 11px; color: var(--ink-400); font-family: var(--font-mono); margin-top: var(--s3); }
  .demo-canvas { background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: var(--s8); }
  .demo-canvas.dark { background: var(--ink-950); border-color: rgba(255,255,255,.08); }
  .dark-grid { display: grid; grid-template-columns: 240px 1fr; min-height: 380px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ink-100); }

  /* Design system preview — color swatches */
  .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--s3); }
  .swatch { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-xs); }
  .swatch-color { height: 56px; }
  .swatch-info { background: #fff; padding: var(--s2) var(--s3); border-top: 1px solid var(--ink-100); }
  .swatch-name { font-size: 11px; font-weight: 600; color: var(--ink-800); }
  .swatch-hex { font-size: 10px; color: var(--ink-400); font-family: var(--font-mono); }

  /* Design system preview — code blocks */
  .code-block {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--ink-950);
    color: #9FBB93;
    padding: var(--s5) var(--s6);
    border-radius: var(--r-md);
    line-height: 1.7;
    overflow-x: auto;
    margin-top: var(--s4);
  }
  .code-block .comment { color: rgba(255,255,255,.3); }
  .code-block .key { color: #7EC8C8; }
  .code-block .val { color: #C4A97A; }

  /* Design system preview — sidebar nav */
  .ds-sidebar {
    width: 220px;
    min-height: 100vh;
    background: var(--ink-950);
    padding: var(--s8) 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
  }
  .ds-sidebar-brand {
    padding: 0 var(--s6) var(--s6);
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: var(--s4);
  }
  .ds-sidebar-brand-name {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    line-height: 1.3;
  }
  .ds-sidebar-brand-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin-top: 2px;
  }
  .ds-sidebar-section {
    padding: var(--s3) var(--s6) var(--s2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin-top: var(--s4);
  }
  .ds-sidebar a {
    display: block;
    padding: 7px var(--s6);
    font-size: 13px;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color var(--transition), background var(--transition);
    border-left: 2px solid transparent;
  }
  .ds-sidebar a:hover { color: #fff; background: rgba(255,255,255,.05); border-left-color: rgba(255,255,255,.2); }
  .ds-sidebar a.active { color: #fff; border-left-color: var(--amber-500); background: rgba(255,255,255,.05); }
}