/* ==========================================================================
   1. Reset & Normalization (基础重置)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(
    --v-font-family,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif
  );
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--v-text-color);
  background-color: var(--v-bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   1.1 Global Polish (滚动条 / 选区 / 焦点)
   ========================================================================== */
:root {
  color-scheme: light;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--v-border-color-hover);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--v-text-color-tertiary);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

::selection {
  background: color-mix(in srgb, var(--v-color-primary) 25%, transparent);
}

:focus-visible {
  outline: 2px solid
    color-mix(in oklab, var(--v-color-primary) 45%, transparent);
  outline-offset: 2px;
}

/* 自定义焦点样式的组件关闭默认 outline，避免双重焦点环 */
.v-btn:focus-visible,
.v-input__inner:focus-visible,
.v-switch-core:focus-visible {
  outline: none;
}

/* ==========================================================================
   2. Design Tokens (设计令牌)
   命名规范: --v-[category]-[name]
   ========================================================================== */
:root {
  /* --- Primitives: Colors (原始色板) --- */
  /* 主色：indigo 系（Linear 风） */
  --v-indigo-50: #eef2ff;
  --v-indigo-100: #e0e7ff;
  --v-indigo-500: #6366f1;
  --v-indigo-600: #4f46e5;
  --v-indigo-700: #4338ca;

  /* emerald：比 green 更柔和现代 */
  --v-green-500: #10b981;
  --v-green-600: #059669;

  --v-red-500: #ef4444;
  --v-red-600: #dc2626;

  /* amber：比 yellow 更克制 */
  --v-yellow-500: #f59e0b;

  /* 纯中性灰阶（zinc 系，去蓝色调） */
  --v-gray-50: #fafafa;
  --v-gray-100: #f4f4f5;
  --v-gray-200: #e4e4e7;
  --v-gray-300: #d4d4d8;
  --v-gray-400: #a1a1aa;
  --v-gray-500: #71717a;
  --v-gray-600: #52525b;
  --v-gray-700: #3f3f46;
  --v-gray-800: #27272a;
  --v-gray-900: #18181b;

  --v-white: #ffffff;
  --v-black: #000000;

  /* --- Semantics: Theme (语义主题) --- */
  /* Primary Action */
  --v-color-primary: var(--v-indigo-500);
  --v-color-primary-hover: var(--v-indigo-600);
  --v-color-primary-active: var(--v-indigo-700);
  --v-color-primary-text: var(--v-white);

  /* Secondary Action */
  --v-color-secondary: var(--v-gray-500);
  --v-color-secondary-hover: var(--v-gray-600);
  --v-color-secondary-active: var(--v-gray-700);
  --v-color-secondary-text: var(--v-white);

  /* Feedback */
  --v-color-info: var(--v-indigo-500);
  --v-color-success: var(--v-green-500);
  --v-color-warning: var(--v-yellow-500);
  --v-color-danger: var(--v-red-500);
  --v-color-danger-hover: var(--v-red-600);

  /* Backgrounds */
  --v-bg-color: var(--v-white);
  --v-bg-color-secondary: var(--v-gray-50);
  --v-bg-color-tertiary: var(--v-gray-100);

  /* Text */
  --v-text-color: var(--v-gray-900);
  --v-text-color-secondary: var(--v-gray-600);
  --v-text-color-tertiary: var(--v-gray-400);
  --v-text-color-disabled: var(--v-gray-300);
  --v-text-color-inverse: var(--v-white);

  /* Borders */
  --v-border-color: var(--v-gray-200);
  --v-border-color-hover: var(--v-gray-300);

  /* --- Dimensions: Spacing & Radius (尺寸) --- */
  --v-radius-sm: 4px;
  --v-radius-md: 6px;
  --v-radius-lg: 10px;
  --v-radius-xl: 14px;
  --v-radius-full: 9999px;

  --v-spacing-xs: 4px;
  --v-spacing-sm: 8px;
  --v-spacing-md: 16px;
  --v-spacing-lg: 24px;
  --v-spacing-xl: 32px;

  /* --- Typography (排版) --- */
  --v-font-size-xs: 12px;
  --v-font-size-sm: 13px;
  --v-font-size-md: 14px;
  /* Base size */
  --v-font-size-lg: 16px;
  --v-font-size-xl: 20px;
  --v-font-size-2xl: 24px;

  --v-font-weight-normal: 400;
  --v-font-weight-medium: 500;
  --v-font-weight-bold: 600;

  /* --- Effects (特效) ---
     现代简约阴影：hairline 描边 + 柔和扩散，避免厚重感 */
  --v-shadow-sm:
    0 0 0 1px rgb(0 0 0 / 0.02), 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --v-shadow-md:
    0 0 0 1px rgb(0 0 0 / 0.03), 0 2px 4px -1px rgb(0 0 0 / 0.05),
    0 6px 12px -4px rgb(0 0 0 / 0.06);
  --v-shadow-lg:
    0 0 0 1px rgb(0 0 0 / 0.03), 0 4px 8px -2px rgb(0 0 0 / 0.05),
    0 16px 32px -8px rgb(0 0 0 / 0.1);

  /* --- Transitions (动画) --- */
  --v-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --v-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --v-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-index Scale (层级) --- */
  --v-z-dropdown: 100;
  --v-z-sticky: 200;
  --v-z-overlay: 900;
  --v-z-modal: 1000;
  --v-z-toast: 2000;

  /* --- Layout (布局) --- */
  --v-layout-max-width: 1120px;
}

/* ==========================================================================
   2.1 Themes (主题)
   通过 documentElement 的 theme 属性切换（$mod.theme.set('t2')）。
   挂在 :root 而非组件宿主，确保 teleport 到 body 的弹层也能继承。
   t1 为默认主题（:root 基础值），无需覆盖块。
   ========================================================================== */

/* 主题 T2: 暗黑/霓虹风格 */
:root[theme="t2"] {
  color-scheme: dark;

  /* Backgrounds */
  --v-bg-color: #0f172a;
  --v-bg-color-secondary: #1e293b;
  --v-bg-color-tertiary: #334155;

  /* Text */
  --v-text-color: #e2e8f0;
  --v-text-color-secondary: #94a3b8;
  --v-text-color-tertiary: #64748b;
  --v-text-color-disabled: #475569;

  /* Primary: 紫色主调 */
  --v-color-primary: #8b5cf6;
  --v-color-primary-hover: #7c3aed;
  --v-color-primary-active: #6d28d9;
  --v-color-primary-text: #ffffff;

  /* Secondary */
  --v-color-secondary: #64748b;
  --v-color-secondary-hover: #475569;
  --v-color-secondary-active: #334155;

  /* Feedback */
  --v-color-info: #8b5cf6;
  --v-color-success: #10b981;
  --v-color-warning: #f59e0b;
  --v-color-danger: #f43f5e;
  --v-color-danger-hover: #e11d48;

  /* Borders */
  --v-border-color: #334155;
  --v-border-color-hover: #475569;

  /* Radius: 更大的圆角 */
  --v-radius-sm: 8px;
  --v-radius-md: 12px;
  --v-radius-lg: 16px;
  --v-radius-xl: 20px;

  /* Typography: 极客字体 */
  --v-font-family: "Menlo", "Monaco", "Courier New", monospace;

  /* Shadows: 暗色下加深 */
  --v-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --v-shadow-md:
    0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --v-shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
}

/* ==========================================================================
   3. Utilities (通用工具类)
   ========================================================================== */
.v-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--v-spacing-md);
  padding-left: var(--v-spacing-md);
}

/* Flexbox Utilities */
.v-flex {
  display: flex;
}

.v-inline-flex {
  display: inline-flex;
}

.v-flex-col {
  flex-direction: column;
}

.v-flex-row {
  flex-direction: row;
}

.v-items-center {
  align-items: center;
}

.v-items-start {
  align-items: flex-start;
}

.v-items-end {
  align-items: flex-end;
}

.v-justify-center {
  justify-content: center;
}

.v-justify-between {
  justify-content: space-between;
}

.v-justify-start {
  justify-content: flex-start;
}

.v-justify-end {
  justify-content: flex-end;
}

.v-flex-wrap {
  flex-wrap: wrap;
}

.v-gap-sm {
  gap: var(--v-spacing-sm);
}

.v-gap-md {
  gap: var(--v-spacing-md);
}

.v-gap-xs {
  gap: var(--v-spacing-xs);
}

.v-gap-lg {
  gap: var(--v-spacing-lg);
}

/* Spacing Utilities */
.v-m-0 {
  margin: 0;
}

.v-mt-xs {
  margin-top: var(--v-spacing-xs);
}

.v-mt-sm {
  margin-top: var(--v-spacing-sm);
}

.v-mt-md {
  margin-top: var(--v-spacing-md);
}

.v-mt-lg {
  margin-top: var(--v-spacing-lg);
}

.v-mb-xs {
  margin-bottom: var(--v-spacing-xs);
}

.v-mb-sm {
  margin-bottom: var(--v-spacing-sm);
}

.v-mb-md {
  margin-bottom: var(--v-spacing-md);
}

.v-mb-lg {
  margin-bottom: var(--v-spacing-lg);
}

.v-ml-xs {
  margin-left: var(--v-spacing-xs);
}

.v-mr-sm {
  margin-right: var(--v-spacing-sm);
}

.v-my-sm {
  margin-top: var(--v-spacing-sm);
  margin-bottom: var(--v-spacing-sm);
}

.v-p-xs {
  padding: var(--v-spacing-xs);
}

.v-p-sm {
  padding: var(--v-spacing-sm);
}

.v-p-md {
  padding: var(--v-spacing-md);
}

/* Text Utilities */
.v-text-center {
  text-align: center;
}

.v-text-left {
  text-align: left;
}

.v-text-right {
  text-align: right;
}

.v-text-xs {
  font-size: var(--v-font-size-xs);
}

.v-text-sm {
  font-size: var(--v-font-size-sm);
}

.v-text-lg {
  font-size: var(--v-font-size-lg);
}

.v-font-bold {
  font-weight: var(--v-font-weight-bold);
}

.v-text-primary {
  color: var(--v-color-primary);
}

.v-text-danger {
  color: var(--v-color-danger);
}

.v-text-success {
  color: var(--v-color-success);
}

.v-text-warning {
  color: var(--v-color-warning);
}

.v-text-secondary {
  color: var(--v-text-color-secondary);
}

/* Border & Radius Utilities */
.v-border {
  border: 1px solid var(--v-border-color);
}

.v-rounded-sm {
  border-radius: var(--v-radius-sm);
}

.v-rounded-md {
  border-radius: var(--v-radius-md);
}

.v-rounded-lg {
  border-radius: var(--v-radius-lg);
}

/* Background Utilities */
.v-bg-secondary {
  background-color: var(--v-bg-color-secondary);
}

.v-hover-bg-secondary:hover {
  background-color: var(--v-bg-color-secondary);
}

/* Cursor Utilities */
.v-cursor-pointer {
  cursor: pointer;
}

/* ==========================================================================
   4. Form Control Base (表单控件基础样式，供 input 系组件共用)
   ========================================================================== */
.v-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  background-color: var(--v-bg-color);
  border-radius: var(--v-radius-md);
  border: 1px solid var(--v-border-color);
  box-sizing: border-box;
  transition: var(--v-transition-base, all 0.2s);
  overflow: hidden;
}

.v-input-wrapper:hover:not(.is-disabled) {
  border-color: var(--v-border-color-hover);
}

.v-input-wrapper:has(:focus-visible):not(.is-disabled) {
  border-color: var(--v-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--v-color-primary) 18%, transparent);
}

.v-input-wrapper.is-disabled {
  background-color: var(--v-bg-color-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.v-input-wrapper.is-error {
  border-color: var(--v-color-danger);
}

.v-input-wrapper.is-error:has(:focus-visible) {
  border-color: var(--v-color-danger);
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--v-color-danger) 18%, transparent);
}

.v-input-wrapper.is-no-border {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.v-input__inner {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--v-text-color);
  font-size: var(--v-font-size-md);
  outline: none;
  padding: var(--v-spacing-sm) var(--v-spacing-md);
  margin: 0;
  line-height: 1.5;
}

.v-input__inner::placeholder {
  color: var(--v-text-color-disabled);
}

.v-input__inner:disabled {
  cursor: not-allowed;
}

.v-error-msg {
  font-size: var(--v-font-size-xs);
  color: var(--v-color-danger);
  min-height: 1.2em;
}

/* Display/Visibility */
.v-hidden {
  display: none !important;
}

.v-block {
  display: block;
}

/* ==========================================================================
   5. Demo Helpers (演示站点共用样式)
   ========================================================================== */
.value-display {
  font-family: ui-monospace, monospace;
  font-size: var(--v-font-size-xs);
  background: var(--v-bg-color-secondary);
  color: var(--v-text-color-secondary);
  padding: var(--v-spacing-sm);
  border-radius: var(--v-radius-sm);
  margin-top: var(--v-spacing-xs);
}

/* ==========================================================================
   6. Doc Pages (组件教程页共用样式)
   ========================================================================== */
.doc-page {
  width: 100%;
  padding-bottom: 48px;
}

.doc-title {
  font-size: 1.8rem;
  font-weight: var(--v-font-weight-bold);
  color: var(--v-text-color);
  margin-bottom: var(--v-spacing-sm);
}

.doc-intro {
  color: var(--v-text-color-secondary);
  line-height: 1.8;
  margin-bottom: var(--v-spacing-xl);
}

.doc-h2 {
  font-size: 1.3rem;
  font-weight: var(--v-font-weight-bold);
  color: var(--v-text-color);
  margin: 40px 0 var(--v-spacing-md);
  padding-top: var(--v-spacing-lg);
  border-top: 1px solid var(--v-border-color);
}