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

.demo-container {
  padding: $semantic-spacing-layout-md;
  max-width: 1200px;
  margin: 0 auto;

  h2 {
    font-size: $semantic-typography-heading-h2-size;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-heading;
    font-weight: $semantic-typography-font-weight-bold;
  }

  h3 {
    font-size: $semantic-typography-heading-h3-size;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-paragraph;
    font-weight: $semantic-typography-font-weight-semibold;
  }
}

.demo-section {
  margin-bottom: $semantic-spacing-layout-lg;
  padding: $semantic-spacing-component-lg;
  background: $semantic-color-surface-primary;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-lg;
  box-shadow: $semantic-shadow-elevation-1;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: $semantic-spacing-layout-md;
  margin-bottom: $semantic-spacing-content-heading;
}

.demo-item {
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-secondary;
  border: $semantic-border-width-1 solid $semantic-color-border-primary;
  border-radius: $semantic-border-radius-md;

  h4 {
    font-size: $semantic-typography-heading-h4-size;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-list-item;
    font-weight: $semantic-typography-font-weight-medium;
  }

  p {
    font-size: $semantic-typography-font-size-sm;
    color: $semantic-color-text-secondary;
    margin-bottom: $semantic-spacing-content-paragraph;
  }
}

.demo-actions {
  display: flex;
  gap: $semantic-spacing-content-paragraph;
  align-items: center;
  margin-bottom: $semantic-spacing-content-heading;
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-variant;
  border-radius: $semantic-border-radius-md;
}

.demo-button {
  padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
  background: $semantic-color-primary;
  color: $semantic-color-on-primary;
  border: none;
  border-radius: $semantic-border-radius-sm;
  font-size: $semantic-typography-font-size-sm;
  font-weight: $semantic-typography-font-weight-medium;
  cursor: pointer;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease-in-out;

  &:hover {
    background: $semantic-color-primary-hover;
    box-shadow: $semantic-shadow-elevation-2;
  }

  &:focus-visible {
    outline: 2px solid $semantic-color-focus;
    outline-offset: 2px;
  }

  &--secondary {
    background: $semantic-color-surface-primary;
    color: $semantic-color-text-primary;
    border: $semantic-border-width-1 solid $semantic-color-border-primary;

    &:hover {
      background: $semantic-color-surface-secondary;
    }
  }
}

.demo-info {
  font-size: $semantic-typography-font-size-sm;
  color: $semantic-color-text-tertiary;
  margin-top: $semantic-spacing-content-list-item;
}

.file-list-demo {
  margin-top: $semantic-spacing-content-paragraph;
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-secondary;
  border-radius: $semantic-border-radius-md;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;

  h5 {
    font-size: $semantic-typography-font-size-lg;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-list-item;
    font-weight: $semantic-typography-font-weight-semibold;
  }

  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $semantic-spacing-component-xs;
    background: $semantic-color-surface-primary;
    border-radius: $semantic-border-radius-sm;
    margin-bottom: $semantic-spacing-content-line-normal;

    &:last-child {
      margin-bottom: 0;
    }

    .file-info {
      font-size: $semantic-typography-font-size-sm;
      color: $semantic-color-text-primary;
    }

    .file-size {
      font-size: $semantic-typography-font-size-xs;
      color: $semantic-color-text-tertiary;
    }
  }
}

.code-demo {
  background: $semantic-color-surface-variant;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-md;
  padding: $semantic-spacing-component-md;
  margin-top: $semantic-spacing-content-paragraph;
  
  pre {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: $semantic-typography-font-size-xs;
    color: $semantic-color-text-secondary;
    overflow-x: auto;
    margin: 0;
  }
}