@use "./variables.scss" as *;

:root {
  --bg-deep: #{$bg-deep};
  --bg-base: #{$bg-base};
  --bg-elevated: #{$bg-elevated};
  --bg-overlay: #{$bg-overlay};
  --bg-hover: #{$bg-hover};
  --bg-active: #{$bg-active};

  --border-soft: #{$border-soft};
  --border: #{$border};
  --border-strong: #{$border-strong};

  --primary: #{$primary};
  --primary-hover: #{$primary-hover};
  --primary-active: #{$primary-active};
  --primary-bg: #{$primary-bg};

  --cyan: #{$cyan};
  --violet: #{$violet};
  --success: #{$success};
  --warning: #{$warning};
  --danger: #{$danger};

  --m-get: #{$m-get};
  --m-post: #{$m-post};
  --m-put: #{$m-put};
  --m-delete: #{$m-delete};
  --m-patch: #{$m-patch};

  --text-primary: #{$text-primary};
  --text-secondary: #{$text-secondary};
  --text-tertiary: #{$text-tertiary};
  --text-disabled: #{$text-disabled};

  --font-xs: #{$font-xs};
  --font-sm: #{$font-sm};
  --font-base: #{$font-base};
  --font-md: #{$font-md};
  --font-lg: #{$font-lg};

  --radius-sm: #{$radius-sm};
  --radius: #{$radius};
  --radius-lg: #{$radius-lg};

  --shadow-glow: #{$shadow-glow};
  --shadow-card: #{$shadow-card};
  --shadow-elevate: #{$shadow-elevate};
}

* {
  box-sizing: border-box;
}

html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  background: $bg-deep;
  color: $text-primary;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: $font-base;
  line-height: 1.5;
  overflow: hidden;
}

// 全局滚动条
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: $border;
  border-radius: 4px;
  &:hover { background: $border-strong; }
}

// 科技感背景：深蓝径向 + 网格线
body {
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(78,161,255,0.08), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(34,211,238,0.06), transparent 60%),
    $bg-deep;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

a { color: $primary; text-decoration: none; }

input, textarea {
  background: $bg-elevated;
  border: 1px solid $border-soft;
  border-radius: $radius-sm;
  outline: none;
  &:focus { border-color: $primary; box-shadow: 0 0 0 2px $primary-bg; }
}

// 通用按钮
.xs-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: $bg-elevated;
  border: 1px solid $border;
  color: $text-primary;
  border-radius: $radius;
  cursor: pointer;
  font-size: $font-base;
  transition: all .18s ease;
  &:hover { background: $bg-hover; border-color: $border-strong; }
  &.primary {
    background: $primary;
    border-color: $primary;
    color: #0a1428;
    font-weight: 600;
    &:hover { background: $primary-hover; border-color: $primary-hover; box-shadow: $shadow-glow; }
    &:active { background: $primary-active; }
  }
  &.ghost { background: transparent; }
  &.danger { color: $danger; border-color: rgba(248,113,113,.4); &:hover { background: rgba(248,113,113,.1); } }
  &:disabled { opacity: .5; cursor: not-allowed; }
}

.xs-input {
  width: 100%;
  padding: 6px 10px;
}

.xs-divider {
  height: 1px;
  background: $border-soft;
  margin: 8px 0;
}

// 科技感输入框 + tag 输入域
.tech-input {
  background: rgba(15,28,54,.6);
  border: 1px solid $border-soft;
  border-radius: $radius;
  padding: 6px 10px;
  outline: none;
  transition: all .2s ease;
  &:focus {
    border-color: $primary;
    background: rgba(15,28,54,.9);
    box-shadow: 0 0 0 3px rgba(78,161,255,.12);
  }
}

// 通用卡片
.tech-card {
  background: linear-gradient(180deg, rgba(15,28,54,.65), rgba(15,28,54,.35));
  border: 1px solid $border-soft;
  border-radius: $radius;
}

// 提示文字
.muted { color: $text-tertiary; }
.secondary { color: $text-secondary; }