/* BOLUO 数字产品设计规范 · CSS 变量（由 tokens.json 生成） */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f5f5f5;
  --bg-inverse: #171717;
  --line: #dddddd;
  --line-strong: #767676;
  --ink-strong: #000000;
  --ink: #171717;
  --ink-muted: #666666;
  --ink-disabled: #a3a3a3;
  --ink-inverse: #ffffff;
  --action: #000000;
  --action-hover: #262626;
  --action-pressed: #404040;
  --on-action: #ffffff;
  --action-disabled: #e5e5e5;
  --focus: #5d00ff;
  --danger: #b3261e;
  --danger-hover: #8f1e18;
  --on-danger: #ffffff;
  --danger-soft: #fcefee;
  --success: #146c2e;
  --success-soft: #ebf4ee;
  --warning: #8a5300;
  --scrim: rgba(0,0,0,0.48);
  --chart-1: #000000;
  --chart-2: #666666;
  --chart-3: #bdbdbd;
  --chart-grid: #ebebeb;
  --brand-black: #000000;
  --brand-white: #ffffff;
  /* 品牌紫：黑白为主、紫色点睛；brand-logo 仅用于标志与动画方块，两种主题不变 */
  --brand-logo: #5d00ff;
  --brand: #5d00ff;
  --on-brand: #ffffff;
  --brand-soft: #f0e8ff;
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-none: none;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --control-sm: 32px;
  --control-md: 44px;
  --control-lg: 48px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --header-web: 64px;
  --sidebar-web: 240px;
  --navbar-app: 44px;
  --tabbar-app: 56px;
  --content-max: 1200px;
  --reading-max: 720px;
  --bp-md: 768px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --font-sans: Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --font-num: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #000000;
  --bg-raised: #141414;
  --bg-sunken: #1f1f1f;
  --bg-inverse: #f2f2f2;
  --line: #2e2e2e;
  --line-strong: #8a8a8a;
  --ink-strong: #ffffff;
  --ink: #ededed;
  --ink-muted: #a3a3a3;
  --ink-disabled: #5c5c5c;
  --ink-inverse: #000000;
  --action: #ffffff;
  --action-hover: #d9d9d9;
  --action-pressed: #bfbfbf;
  --on-action: #000000;
  --action-disabled: #262626;
  --focus: #9b6bff;
  --brand: #9b6bff;
  --on-brand: #000000;
  --brand-soft: #1d0f3d;
  --danger: #ff8a80;
  --danger-hover: #ffa59d;
  --on-danger: #000000;
  --danger-soft: #2a0f0d;
  --success: #6dd58c;
  --success-soft: #0e2416;
  --warning: #f0b44c;
  --scrim: rgba(0,0,0,0.64);
  --chart-1: #ffffff;
  --chart-2: #a3a3a3;
  --chart-3: #5c5c5c;
  --chart-grid: #262626;
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.60);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-raised: #141414;
  --bg-sunken: #1f1f1f;
  --bg-inverse: #f2f2f2;
  --line: #2e2e2e;
  --line-strong: #8a8a8a;
  --ink-strong: #ffffff;
  --ink: #ededed;
  --ink-muted: #a3a3a3;
  --ink-disabled: #5c5c5c;
  --ink-inverse: #000000;
  --action: #ffffff;
  --action-hover: #d9d9d9;
  --action-pressed: #bfbfbf;
  --on-action: #000000;
  --action-disabled: #262626;
  --focus: #9b6bff;
  --brand: #9b6bff;
  --on-brand: #000000;
  --brand-soft: #1d0f3d;
  --danger: #ff8a80;
  --danger-hover: #ffa59d;
  --on-danger: #000000;
  --danger-soft: #2a0f0d;
  --success: #6dd58c;
  --success-soft: #0e2416;
  --warning: #f0b44c;
  --scrim: rgba(0,0,0,0.64);
  --chart-1: #ffffff;
  --chart-2: #a3a3a3;
  --chart-3: #5c5c5c;
  --chart-grid: #262626;
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.60);
}

/* Adapter for existing components; semantic values come from BOLUO V2. */
:root {
 --surface: var(--bg-raised); --surface-hover: var(--bg-sunken);
 --bg-brand: var(--bg-sunken); --ink-subtle: var(--ink-muted);
 --brand-ink: var(--ink-strong);
 --error: var(--danger); --error-soft: var(--danger-soft);
 --warning-soft: var(--bg-sunken); --info: var(--ink); --info-soft: var(--bg-sunken);
 --shadow-1: none; --shadow-2: var(--shadow-popover);
 --size-touch: 44px; --size-control: var(--control-md); --size-control-sm: var(--control-sm);
 --size-icon: 24px; --size-appbar: var(--header-web); --size-tabbar: 56px;
 --size-sidebar: var(--sidebar-web); --size-reading: var(--reading-max); --size-page: var(--content-max);
 --font-display: var(--font-sans); --font-mono: Consolas, monospace;
 --duration-micro: 150ms; --duration-panel: 220ms; --ease-out: cubic-bezier(.16,1,.3,1);
}