@use 'ui-design-system/src/styles/semantic/index' as *;

.demo-container {
  padding: $semantic-spacing-component-lg;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: $semantic-spacing-layout-section-lg;
  
  h3 {
    font-family: $semantic-typography-font-family-sans;
    font-size: $semantic-typography-font-size-lg;
    font-weight: $semantic-typography-font-weight-semibold;
    line-height: $semantic-typography-line-height-tight;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-component-md;
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-secondary;
    padding-bottom: $semantic-spacing-component-sm;
  }
}

.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: $semantic-spacing-component-md;
  align-items: flex-start;
  margin-bottom: $semantic-spacing-component-lg;
}

.demo-results {
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-secondary;
  border: $semantic-border-width-1 solid $semantic-color-border-secondary;
  border-radius: $semantic-border-radius-md;
  
  p {
    font-family: $semantic-typography-font-family-sans;
    font-size: $semantic-typography-font-size-md;
    font-weight: $semantic-typography-font-weight-normal;
    line-height: $semantic-typography-line-height-normal;
    color: $semantic-color-text-primary;
    margin: $semantic-spacing-component-xs 0;
    
    strong {
      font-weight: $semantic-typography-font-weight-semibold;
      color: $semantic-color-text-primary;
    }
  }
}

// Responsive adjustments
@media (max-width: 768px) {
  .demo-row {
    flex-direction: column;
    gap: $semantic-spacing-component-sm;
  }
  
  .demo-container {
    padding: $semantic-spacing-component-md;
  }
}