/* shell-theme.css：主题 token + 基础样式（从 7 页 theme-vars 超集合并，2026-08-23） */

:root{
  --clr-bg: #F7F7FB;
  --clr-surface: rgba(255, 255, 255, 0.92);
  --clr-surface-2: rgba(255, 255, 255, 0.72);
  --clr-ink: #1A1D26;
  --clr-ink-2: rgba(26, 29, 38, 0.72);
  --clr-ink-3: rgba(26, 29, 38, 0.42);
  --clr-line: rgba(26, 29, 38, 0.08);
  --clr-line-2: rgba(26, 29, 38, 0.14);
  --clr-brand: #7C6FE8;
  --clr-brand-hover: #6A5CE0;
  --clr-brand-ink: #FFFFFF;
  --clr-support: #8B7CF6;
  --brand-grad: linear-gradient(135deg, #8B7CF6, #5E56D6);

  --state-success: #2F9078;
  --state-warning: #D9820B;
  --state-error: #E5484D;
  --state-error-bg: rgba(229, 72, 77, 0.08);
  --toast-bg: #FFFFFF;
  --brand-bar: rgba(124, 111, 232, 0.14);
  --state-info: #2980B9;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 80px;

  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 9999px;

  --border: 1px solid var(--clr-line);
  --border-brand: 1px solid var(--clr-brand);

  --shadow-1: 0 1px 2px rgba(28, 25, 60, 0.04), 0 1px 1px rgba(28, 25, 60, 0.02);
  --shadow-2: 0 8px 24px -8px rgba(28, 25, 60, 0.14);
  --shadow-3: 0 24px 60px -20px rgba(94, 86, 214, 0.25);

  --glass-bg: #FFFFFF;
  --glass-border: 1px solid rgba(124, 111, 232, 0.10);
  --glass-blur: none;
  --glass-shadow: 0 1px 2px rgba(28, 25, 60, 0.04), 0 16px 40px -20px rgba(94, 86, 214, 0.18);
  /* semantic overlays (dark-theme safe) */
  --clr-bar-bg: rgba(255, 255, 255, 0.82);
  --clr-fill-subtle: rgba(124, 111, 232, 0.04);
  --clr-fill: rgba(124, 111, 232, 0.06);
  --clr-fill-strong: rgba(124, 111, 232, 0.10);
  --clr-field-bg: #FBFBFE;
  --clr-hover-overlay: rgba(124, 111, 232, 0.05);
  --clr-edge: rgba(124, 111, 232, 0.12);

  --font-display: 'Space Grotesk', 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;

  --sidebar-width: 72px;
  --sidebar-expanded: 240px;
  --content-px: var(--s-6);
  /* control sizing tokens */
  --control-h-xs: 22px;
  --control-h-sm: 32px;
  --control-h-md: 36px;
  --control-h-lg: 36px;
  --control-px-sm: 12px;
  --control-px-md: 16px;
  --control-px-lg: 15px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 420ms;
}

:root{
  --brand-background: var(--clr-bg);
  --brand-foreground: var(--clr-ink);
  --brand-card: var(--clr-surface);
  --brand-card-foreground: var(--clr-ink);
  --brand-popover: var(--clr-surface-2);
  --brand-popover-foreground: var(--clr-ink);
  --brand-primary: var(--clr-brand);
  --brand-primary-foreground: var(--clr-brand-ink);
  --brand-muted: rgba(124, 111, 232, 0.06);
  --brand-muted-foreground: var(--clr-ink-2);
  --brand-border: var(--clr-line);
  --brand-input: var(--clr-line);
  --brand-ring: var(--clr-brand);
  --brand-radius-sm: var(--r-sm);
  --brand-radius-md: var(--r-md);
  --brand-radius-lg: var(--r-lg);
}

/* ---- Dark Theme ---- */
[data-theme="dark"]{
  --clr-bg: #0F1016;
  --clr-surface: rgba(21, 22, 30, 0.92);
  --clr-surface-2: rgba(29, 30, 41, 0.72);
  --clr-ink: #EDEEF4;
  --clr-ink-2: rgba(237, 238, 244, 0.62);
  --clr-ink-3: rgba(237, 238, 244, 0.40);
  --clr-line: rgba(139, 124, 246, 0.13);
  --clr-line-2: rgba(139, 124, 246, 0.20);
  --clr-brand: #8B7CF6;
  --clr-brand-hover: #9D8FF8;
  --clr-brand-ink: #FFFFFF;
  --clr-support: #9D8FF8;

  --glass-bg: #15161E;
  --glass-border: 1px solid rgba(139, 124, 246, 0.14);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -20px rgba(0, 0, 0, 0.5);
  /* semantic overlays — dark values */
  --clr-bar-bg: rgba(21, 22, 30, 0.8);
  --toast-bg: #1D1E29;
  --clr-fill-subtle: rgba(139, 124, 246, 0.05);
  --clr-fill: rgba(139, 124, 246, 0.07);
  --clr-fill-strong: rgba(139, 124, 246, 0.12);
  --clr-field-bg: rgba(139, 124, 246, 0.06);
  --clr-hover-overlay: rgba(139, 124, 246, 0.08);
  --clr-edge: rgba(139, 124, 246, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.5);

  --brand-muted: rgba(139, 124, 246, 0.10);
  --brand-muted-foreground: var(--clr-ink-2);
  --brand-border: var(--clr-line);
  --brand-input: var(--clr-line);
  --brand-popover: var(--clr-surface-2);
  --brand-popover-foreground: var(--clr-ink);
}

html{
  font-family: var(--font-body);
  color: var(--clr-ink);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.display-lg{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.h1{
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h2{
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.h3{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.body-md{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.caption{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--clr-ink-2);
}

.label-md{
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.glass-surface{
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

::-webkit-scrollbar{ width: 6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--clr-ink-3); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover{ background: var(--clr-ink-2); }
            .btn-ghost:active, .btn-secondary:active, .btn-danger:active,
      .btn-icon:active, .pill-btn:active{
        transform: scale(0.97);
      }
            .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible,
      .btn-danger:focus-visible, .btn-icon:focus-visible, .batch-input-btn:focus-visible,
      .batch-clear-btn:focus-visible, .input-field:focus-visible, .batch-modal-textarea:focus-visible,
      .upload-zone:focus-visible, .pill-btn:focus-visible{
        outline: 2px solid var(--clr-brand);
        outline-offset: 2px;
      }
            .btn-icon.btn-copy.copied{
        color: var(--clr-brand);
        background: var(--brand-muted);
      }
      .btn-ghost.copied{
        color: var(--clr-brand);
        border-color: var(--clr-brand);
      }
            .btn-ghost.btn-danger-ghost{ color: var(--state-error); }
      .btn-ghost.btn-danger-ghost:hover{ background: var(--state-error-bg); }
      .kbd{
        font-family: var(--font-mono);
        font-size: 10px;
        padding: 1px 5px;
        border: 1px solid var(--clr-line-2);
        border-bottom-width: 2px;
        border-radius: 4px;
        background: var(--clr-fill-subtle);
        color: var(--clr-ink-2);
        line-height: 1.4;
      }
            .input-field.using-global{
        border-style: dashed;
        border-color: var(--clr-brand);
      }
      .data-table thead th.sortable{ cursor: pointer; user-select: none; }
      .data-table thead th.sortable:hover{ color: var(--clr-ink); }
      .sort-ind{ font-size: 9px; margin-left: 3px; }
      @media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

      @media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}