.sir-design-system{max-width:1400px;padding:2rem}.sir-design-system .sir-design-header{margin-bottom:2rem}.sir-design-system .sir-design-header h1{margin-bottom:.5rem}.sir-design-system .sir-design-header p{color:#666}.sir-design-system .design-section{margin:0;padding:0}.sir-design-system .design-section h2{margin-top:0;margin-bottom:1rem}.sir-design-system .design-section h3{margin-top:2rem;margin-bottom:1rem}.sir-design-system .design-section>p{margin-top:0}.sir-design-system .component-demo{margin-bottom:2rem}.sir-design-system .color-section{margin-top:2rem}.sir-design-system .color-section .color-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin-top:1rem;display:grid}.sir-design-system .color-section .color-grid .color-card{border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.sir-design-system .color-section .color-grid .color-card .color-swatch{width:100%;height:120px}.sir-design-system .color-section .color-grid .color-card .color-info{padding:1rem}.sir-design-system .color-section .color-grid .color-card .color-info h4{margin:0 0 .5rem}.sir-design-system .color-section .color-grid .color-card .color-info p{margin:.25rem 0;font-size:.9rem}.sir-design-system .color-section .color-grid .color-card .color-info .color-value-row{align-items:center;gap:.5rem;display:flex}.sir-design-system .color-section .color-grid .color-card .color-info .color-value-row span{flex:1}.sir-design-system .color-section .color-grid .color-card .color-info .color-value-row .copy-button{flex-grow:0;flex-shrink:0;width:auto;min-width:auto;padding:.25rem .5rem;font-size:.75rem}.sir-design-system .typography-section{margin-top:2rem}.sir-design-system .typography-section .font-families{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1rem;display:grid}.sir-design-system .typography-section .font-families .font-family-card{background-color:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;padding:1.5rem}.sir-design-system .typography-section .font-families .font-family-card h4{color:#000;margin:0 0 .5rem;font-size:1.5rem}.sir-design-system .typography-section .font-families .font-family-card p{color:#666;margin:0;font-size:.9rem}.sir-design-system .typography-section .type-example{border-left:4px solid var(--sir-blue);background-color:#fafafa;margin:2rem 0;padding:1.5rem}.sir-design-system .typography-section .type-example>div:first-child{color:#000;margin-bottom:.75rem;font-size:2rem;line-height:1.3}.sir-design-system .typography-section .type-example .type-label{color:#666;margin:0;font-size:.85rem;font-style:italic}.sir-design-system .alert-examples{flex-direction:column;gap:1rem;display:flex}.sir-design-system .loader-container-demo{border:1px solid #ddd;height:300px;margin-top:1rem;position:relative}.sir-design-system .form-actions{margin-top:1.5rem}