@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);:root{--color-primary:#2563EB;--color-primary-dark:#1E40AF;--color-primary-light:#DBEAFE;--color-secondary:#10B981;--color-secondary-dark:#059669;--color-secondary-light:#D1FAE5;--color-accent:#F59E0B;--color-accent-dark:#D97706;--color-accent-light:#FEF3C7;--color-text-primary:#111827;--color-text-secondary:#6B7280;--color-text-tertiary:#9CA3AF;--color-border:#E5E7EB;--color-border-light:#F3F4F6;--color-background:#F9FAFB;--color-white:#FFFFFF;--color-black:#000000;--font-primary:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--font-secondary:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--font-code:'Monaco', 'Courier New', monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3.5rem;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1);--shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1);--transition-fast:150ms ease-in-out;--transition-base:250ms ease-in-out;--transition-slow:350ms ease-in-out;--container-max-width:1200px}.design-system-page *{box-sizing:border-box}.design-system-page{font-family:var(--font-secondary);color:var(--color-text-secondary);line-height:var(--leading-normal)}.ds-h1,.ds-page-title{font-family:var(--font-primary);font-size:var(--text-5xl);font-weight:var(--font-bold);color:var(--color-text-primary);line-height:var(--leading-tight);margin:0 0 var(--space-4) 0}.ds-h2,.ds-section-title{font-family:var(--font-primary);font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--color-text-primary);line-height:var(--leading-tight);margin:0 0 var(--space-3) 0}.ds-h3,.ds-subsection-title{font-family:var(--font-primary);font-size:var(--text-3xl);font-weight:var(--font-semibold);color:var(--color-text-primary);line-height:var(--leading-tight);margin:var(--space-8) 0 var(--space-4) 0}.ds-h4{font-family:var(--font-primary);font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-text-primary);line-height:var(--leading-normal);margin:0 0 var(--space-2) 0}.ds-h5{font-family:var(--font-primary);font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text-primary);line-height:var(--leading-normal);margin:0 0 var(--space-2) 0}.ds-subtitle{font-size:var(--text-xl);color:var(--color-text-secondary);margin:0 0 var(--space-6) 0}.ds-section-description{font-size:var(--text-lg);color:var(--color-text-secondary);margin:0 0 var(--space-8) 0;max-width:800px}.ds-body-large{font-size:var(--text-lg);line-height:var(--leading-relaxed)}.ds-body{font-size:var(--text-base);line-height:var(--leading-normal)}.ds-body-small{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-text-tertiary)}code{font-family:var(--font-code);font-size:var(--text-sm);background:var(--color-background);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--color-primary-dark)}.ds-hero{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-white);padding:var(--space-20) var(--space-4);text-align:center}.ds-hero .ds-page-title{color:var(--color-white);margin-bottom:var(--space-4)}.ds-hero .ds-subtitle{color:rgba(255,255,255,.9)}.ds-section{padding:var(--space-16) var(--space-4)}.ds-bg-alt{background:var(--color-background)}.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--space-4)}.ds-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-6);margin-bottom:var(--space-8)}.ds-color-card{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--transition-base)}.ds-color-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.ds-color-swatch{height:120px;width:100%}.ds-color-info{padding:var(--space-4)}.ds-color-info h4{font-family:var(--font-primary);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2) 0}.ds-color-info code{display:block;margin-bottom:var(--space-2)}.ds-color-hex{font-family:var(--font-code);font-size:var(--text-sm);color:var(--color-text-secondary);margin:var(--space-2) 0}.ds-color-usage{font-size:var(--text-sm);color:var(--color-text-tertiary);margin:0}.ds-type-specimen{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-8);margin-bottom:var(--space-8)}.ds-type-card{background:var(--color-white);padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.ds-font-primary-sample{font-family:var(--font-primary);font-size:var(--text-2xl);line-height:var(--leading-relaxed);margin:var(--space-4) 0}.ds-font-secondary-sample{font-family:var(--font-secondary);font-size:var(--text-2xl);line-height:var(--leading-relaxed);margin:var(--space-4) 0}.ds-usage{font-size:var(--text-sm);color:var(--color-text-tertiary);margin-top:var(--space-3)}.ds-type-scale{display:flex;flex-direction:column;gap:var(--space-6)}.ds-type-example{padding:var(--space-4);background:var(--color-white);border-radius:var(--radius-md);border:1px solid var(--color-border)}.ds-type-example code{display:block;margin-top:var(--space-3);font-size:var(--text-xs)}.ds-spacing-scale{display:flex;flex-direction:column;gap:var(--space-4);max-width:600px}.ds-spacing-example{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3);background:var(--color-white);border-radius:var(--radius-md);border:1px solid var(--color-border)}.ds-spacing-visual{height:32px;background:var(--color-primary);border-radius:var(--radius-sm)}.ds-spacing-info{display:flex;gap:var(--space-3);align-items:center}.ds-spacing-info code{min-width:100px}.ds-spacing-info span{font-size:var(--text-sm);color:var(--color-text-tertiary)}.ds-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-semibold);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all var(--transition-base);text-decoration:none;line-height:1}.ds-btn:focus{outline:2px solid var(--color-primary);outline-offset:2px}.ds-btn-primary{background:var(--color-primary);color:var(--color-white)}.ds-btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.ds-btn-primary:active{transform:translateY(0)}.ds-btn-primary:disabled{background:var(--color-border);color:var(--color-text-tertiary);cursor:not-allowed;transform:none;box-shadow:none}.ds-btn-secondary{background:var(--color-secondary);color:var(--color-white)}.ds-btn-secondary:hover{background:var(--color-secondary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.ds-btn-outline{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}.ds-btn-outline:hover{background:var(--color-primary);color:var(--color-white)}.ds-btn-text{background:transparent;color:var(--color-primary);padding:var(--space-2) var(--space-4)}.ds-btn-text:hover{background:var(--color-primary-light);color:var(--color-primary-dark)}.ds-btn-lg{font-size:var(--text-lg);padding:var(--space-4) var(--space-8)}.ds-btn-sm{font-size:var(--text-sm);padding:var(--space-2) var(--space-4)}.ds-component-group{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-6)}.ds-card-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-8)}.ds-card{background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;transition:all var(--transition-base)}.ds-card-header{padding:var(--space-6);border-bottom:1px solid var(--color-border)}.ds-card-header h3{font-family:var(--font-primary);font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:0}.ds-card-body{padding:var(--space-6)}.ds-card-body p{margin:0;color:var(--color-text-secondary)}.ds-card-footer{padding:var(--space-6);border-top:1px solid var(--color-border);background:var(--color-background)}.ds-card-featured{border:2px solid var(--color-primary);box-shadow:var(--shadow-md)}.ds-card-featured .ds-card-header{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark))}.ds-card-featured .ds-card-header h3{color:var(--color-white)}.ds-card-hover{cursor:pointer}.ds-card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.ds-link{color:var(--color-primary);text-decoration:none;font-weight:var(--font-medium);transition:color var(--transition-fast)}.ds-link:hover{color:var(--color-primary-dark);text-decoration:underline}.ds-form-examples{max-width:600px}.ds-form-group{margin-bottom:var(--space-6)}.ds-label{display:block;font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-primary);margin-bottom:var(--space-2)}.ds-input{width:100%;padding:var(--space-3);font-family:var(--font-secondary);font-size:var(--text-base);color:var(--color-text-primary);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.ds-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.ds-input::placeholder{color:var(--color-text-tertiary)}.ds-checkbox,.ds-radio{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;margin-bottom:var(--space-2)}.ds-checkbox input,.ds-radio input{cursor:pointer}.ds-icon-examples{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-6);margin:var(--space-6) 0}.ds-icon-demo{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-white);border-radius:var(--radius-md);border:1px solid var(--color-border)}.ds-icon-demo i{font-size:var(--text-4xl);color:var(--color-primary)}.ds-icon-demo code{font-size:var(--text-xs)}.ds-guidelines{list-style:none;padding:0;margin:var(--space-6) 0}.ds-guidelines li{padding:var(--space-3) 0;padding-left:var(--space-6);position:relative;color:var(--color-text-secondary)}.ds-guidelines li::before{content:"→";position:absolute;left:0;color:var(--color-primary);font-weight:var(--font-bold)}.ds-grid-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin:var(--space-6) 0}.ds-grid-col{min-height:100px}.ds-grid-box{height:100%;background:var(--color-primary-light);border:2px dashed var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-weight:var(--font-semibold);color:var(--color-primary-dark)}.ds-mt-4{margin-top:var(--space-4)}@media (max-width:768px){.ds-h1,.ds-page-title{font-size:var(--text-4xl)}.ds-h2,.ds-section-title{font-size:var(--text-3xl)}.ds-h3,.ds-subsection-title{font-size:var(--text-2xl)}.ds-hero{padding:var(--space-12) var(--space-4)}.ds-section{padding:var(--space-12) var(--space-4)}.ds-color-grid,.ds-card-examples{grid-template-columns:1fr}.ds-type-specimen{grid-template-columns:1fr}.ds-nav{flex-wrap:wrap;gap:var(--space-2)}.ds-nav-btn{flex:1 1 calc(50% - var(--space-2));min-width:120px}}.ds-nav{position:sticky;top:0;background:var(--color-white);border-bottom:2px solid var(--color-border);padding:var(--space-4);z-index:100;box-shadow:0 2px 4px rgba(0,0,0,.05)}.ds-nav-container{max-width:var(--container-max-width);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ds-nav-btn{padding:var(--space-3) var(--space-6);border:2px solid var(--color-border);background:var(--color-white);color:var(--color-text-secondary);font-family:var(--font-primary);font-weight:var(--font-semibold);font-size:var(--text-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-decoration:none;display:inline-block;text-align:center}.ds-nav-btn:hover{background:var(--color-background);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.ds-nav-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.ds-nav-btn.active:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(0)}