.design-tokens{padding:24px;font-family:Inter,system-ui,sans-serif}.section-title{color:var(--token-text-light,#141e33);margin-bottom:24px;font-size:24px}.token-section{margin-bottom:32px}.subsection-title{color:var(--token-text-light,#141e33);margin-bottom:16px;font-size:18px}.color-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.color-swatch{border:1px solid var(--token-surface-2-light,#e0e0e0);border-radius:8px;padding:12px}.swatch-header{margin-bottom:8px}.swatch-name{font-size:14px;font-weight:600}.swatch-pair{gap:8px;display:flex}.swatch-item{flex-direction:column;flex:1;gap:4px;display:flex}.swatch-color{border:1px solid var(--token-surface-2-light,#e0e0e0);border-radius:4px;width:100%;height:40px}.swatch-label{color:var(--token-text-secondary-light,#4a5570);font-size:11px}.token-value{align-items:center;gap:4px;font-size:12px;display:flex}.token-value code{background:var(--token-surface-2-light,#f0f0f0);border-radius:4px;padding:2px 6px;font-family:monospace}.copy-btn{border:1px solid var(--token-surface-2-light,#e0e0e0);cursor:pointer;color:var(--token-text-secondary-light,#4a5570);background:0 0;border-radius:4px;padding:2px 6px;font-size:11px}.copy-btn:hover{background:var(--token-surface-2-light,#f0f0f0)}.spacing-grid{flex-direction:column;gap:8px;display:flex}.spacing-bar-row{align-items:center;gap:12px;display:flex}.spacing-name{width:40px;font-size:14px;font-weight:600}.spacing-bar-track{background:var(--token-surface-2-light,#f0f0f0);border-radius:4px;flex:1;height:20px;overflow:hidden}.spacing-bar-fill{background:var(--token-accent-light,#3764f0);border-radius:4px;height:100%}.radius-grid{flex-direction:column;gap:8px;display:flex}.radius-preview-row{align-items:center;gap:12px;display:flex}.radius-name{width:40px;font-size:14px;font-weight:600}.radius-box{background:var(--token-accent-light,#3764f0);opacity:.6;width:40px;height:40px}.shadow-grid{flex-direction:column;gap:16px;display:flex}.shadow-preview-row{align-items:center;gap:12px;display:flex}.shadow-name{width:40px;font-size:14px;font-weight:600}.shadow-box{background:var(--token-surface-3-light,#fff);border-radius:8px;width:60px;height:60px}.typography-grid{flex-direction:column;gap:8px;display:flex}.typography-sample-row{align-items:center;gap:12px;display:flex}.typography-name{width:100px;font-size:14px;font-weight:600}.typography-value{flex:1}