/* Page-specific styles for the internal design-system reference. */

.ds-header{ padding-block: var(--space-9) var(--space-8); border-bottom: var(--border-hairline); }
.ds-header .eyebrow{ margin-bottom: var(--space-4); }

.ds-nav{
  position: sticky; top: calc(var(--nav-height) + 1px); z-index: 50;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-bottom: var(--border-hairline);
  overflow-x: auto;
}
.ds-nav__row{ display: flex; gap: var(--space-6); padding-block: var(--space-3); white-space: nowrap; }
.ds-nav__row a{ font-size: var(--text-small); font-weight: 600; color: var(--text-tertiary); }
.ds-nav__row a:hover{ color: var(--blue-600); }

.ds-block{ padding-block: var(--space-10); border-bottom: var(--border-hairline); }
.ds-block__head{ margin-bottom: var(--space-7); max-width: 640px; }
.ds-block__head h2{ margin-bottom: var(--space-3); }

.swatch-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-5); }
.swatch__color{ height: 72px; border-radius: var(--radius-md); border: var(--border-hairline); }
.swatch__name{ margin-top: var(--space-3); font-size: var(--text-small); font-weight: 600; }
.swatch__role{ display: block; font-weight: 400; color: var(--text-tertiary); font-size: var(--text-micro); margin-top: 2px; }
.swatch__hex{ font-family: 'SF Mono', Menlo, monospace; font-size: var(--text-micro); color: var(--text-tertiary); margin-top: 2px; }

.specimen{ padding-block: var(--space-5); border-bottom: var(--border-hairline); }
.specimen:last-child{ border-bottom: none; }
.specimen__label{ font-size: var(--text-micro); color: var(--text-tertiary); font-family: 'SF Mono', Menlo, monospace; margin-bottom: var(--space-3); }

.space-scale{ display: flex; flex-direction: column; gap: var(--space-3); }
.space-row{ display: flex; align-items: center; gap: var(--space-4); }
.space-row__bar{ height: 20px; background: var(--blue-600); border-radius: 4px; flex-shrink: 0; }
.space-row__label{ font-size: var(--text-small); color: var(--text-secondary); font-family: 'SF Mono', Menlo, monospace; }

.token-row{ display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-3); }
.radius-demo{ width: 72px; height: 72px; background: var(--blue-50); border: 1.5px solid var(--blue-300); flex-shrink: 0; }
.shadow-demo{ width: 96px; height: 72px; background: var(--white); border-radius: var(--radius-lg); flex-shrink: 0; }
.token-row__label{ font-size: var(--text-small); font-family: 'SF Mono', Menlo, monospace; color: var(--text-secondary); }

.demo-row{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.dark-demo{ background: var(--blue-600); border-radius: var(--radius-lg); padding: var(--space-6); }

.hand-compare{ margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-hairline); }
.hand-picker{ margin-top: var(--space-5); border: var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--ink-50); }
.hand-picker__controls{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.hand-picker__preview{
  margin-top: var(--space-6); padding: var(--space-6) var(--space-5) var(--space-4);
  background: var(--white); border: var(--border-hairline); border-bottom: 2px solid var(--ink-300); border-radius: var(--radius-md);
  min-height: 100px; display: flex; align-items: flex-end; overflow: hidden;
}
.hand-picker__sample{ font-size: 3rem; line-height: 1; color: var(--ink-900); white-space: nowrap; }
.hand-picker select.input{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2367748C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
@media (max-width: 640px){ .hand-picker__controls{ grid-template-columns: 1fr; } }
.hand-compare__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.hand-compare__item{ border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-5); background: var(--white); min-width: 0; }
.hand-compare__sample{ font-size: 1.9rem; line-height: 1.3; color: var(--ink-900); overflow-wrap: break-word; }
.hand-compare__label{ display: block; margin-top: 10px; font-size: var(--text-micro); color: var(--text-tertiary); }

.icon-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-5); }
.icon-card{ display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); border: var(--border-hairline); border-radius: var(--radius-md); }
.icon-card svg{ width: 26px; height: 26px; color: var(--blue-600); }
.icon-card span{ font-size: var(--text-micro); color: var(--text-tertiary); }

.signature-demo-card{ max-width: 460px; }
.signature-preview{
  margin-top: var(--space-5); padding: var(--space-6) var(--space-5) var(--space-4);
  border-bottom: 2px solid var(--ink-300); min-height: 88px; display: flex; align-items: flex-end;
}
.signature{ font-size: 3rem; }
.signature.is-placeholder{ color: var(--ink-300); font-family: var(--font-sans); font-size: var(--text-body); }

.logo-swatch{ display: flex; align-items: center; justify-content: center; padding: var(--space-8); border-radius: var(--radius-lg); border: var(--border-hairline); }
.logo-swatch[data-surface="dark"]{ background: var(--blue-600); border: none; }