.foundation-section { margin-bottom: var(--ic-space-12); }
.foundation-section > h2 { margin-bottom: var(--ic-space-4); color: var(--ic-navy-950); font-size: var(--ic-title-md); }
.foundation-section > p { max-width: 68ch; margin-bottom: var(--ic-space-6); color: var(--ic-asphalt-650); }
.foundation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--ic-space-4); }
.foundation-panel { padding: var(--ic-space-5); border: 1px solid var(--ic-concrete-200); border-radius: var(--ic-radius-lg); background: var(--ic-white); box-shadow: var(--ic-shadow-card); }
.foundation-panel h3 { margin-bottom: var(--ic-space-3); color: var(--ic-navy-950); font-size: var(--ic-title-sm); }
.swatch { min-height: 7rem; display: flex; align-items: end; padding: var(--ic-space-4); border-radius: var(--ic-radius-md); color: var(--ic-white); font-size: var(--ic-text-sm); font-weight: 700; }
.swatch.navy { background: var(--ic-navy-950); }
.swatch.blue { background: var(--ic-blue-600); }
.swatch.green { background: var(--ic-green-600); }
.swatch.neutral { background: var(--ic-concrete-100); color: var(--ic-asphalt-950); }
.type-display { max-width: 14ch; margin-bottom: var(--ic-space-5); color: var(--ic-navy-950); font-size: var(--ic-display); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
[dir="rtl"] .type-display { letter-spacing: -.015em; }
.type-body { max-width: 68ch; color: var(--ic-asphalt-650); font-size: var(--ic-text-md); line-height: 1.55; }
.control-row { display: flex; flex-wrap: wrap; gap: var(--ic-space-3); align-items: end; }
.foundation-button { min-height: 48px; padding: 0 var(--ic-space-5); border-radius: var(--ic-radius-md); border: 1px solid var(--ic-concrete-200); background: var(--ic-white); color: var(--ic-asphalt-950); font-weight: 700; cursor: pointer; }
.foundation-button.primary { border-color: var(--ic-blue-600); background: var(--ic-blue-600); color: var(--ic-white); }
.foundation-button.positive { border-color: var(--ic-green-600); background: var(--ic-green-600); color: var(--ic-white); }
.foundation-field { display: grid; gap: var(--ic-space-2); min-width: min(100%, 18rem); color: var(--ic-asphalt-800); font-size: var(--ic-text-sm); font-weight: 700; }
.foundation-field input { min-height: 48px; padding: 0 var(--ic-space-4); border: 1px solid var(--ic-concrete-300); border-radius: var(--ic-radius-md); background: var(--ic-white); color: var(--ic-asphalt-950); }
.status-list { display: flex; flex-wrap: wrap; gap: var(--ic-space-2); }
.foundation-status { display: inline-flex; align-items: center; gap: var(--ic-space-2); min-height: 28px; padding: .2rem .65rem; border: 1px solid; border-radius: var(--ic-radius-pill); font-size: var(--ic-text-xs); font-weight: 750; }
.foundation-status::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: currentColor; }
.foundation-status.clean { color: var(--ic-success); background: var(--ic-success-bg); border-color: var(--ic-success-border); }
.foundation-status.attention { color: var(--ic-warning); background: var(--ic-warning-bg); border-color: var(--ic-warning-border); }
.foundation-status.urgent { color: var(--ic-danger); background: var(--ic-danger-bg); border-color: var(--ic-danger-border); }
.foundation-status.offline { color: var(--ic-offline); background: var(--ic-offline-bg); border-color: var(--ic-offline-border); }
@media (max-width: 639px) { .foundation-panel { padding: var(--ic-space-4); } .type-display { font-size: 2.5rem; } }