/* static/css/components/surface-tokens.css */
/* 功能：合成 Token 映射层（根状态 → 语义 Token） */
/* 目的：把“主题/开关”的判断从组件选择器里挪到变量层 */
/* 相关文件：views/base.html, static/css/components/theme.css, static/css/components/glassmorphism.css */

/* 默认：亮色 + 玻璃关闭（确保主题未初始化时也有值） */
:root {
  --surface-bg: var(--light-bg-color);
  --card-surface-bg: var(--light-card-bg-color);
  --inner-surface-bg: var(--inner-container-bg-light-no-glass);
  --inner-active-surface-bg: var(--inner-container-active-bg-light-no-glass);
  --inner-container-shadow: var(--inner-container-shadow-light);
  --small-element-surface-bg: var(--small-element-bg-light-no-glass);
  --small-element-hover-surface-bg: var(--small-element-hover-bg-light-no-glass);
  --overlay-surface-bg: var(--light-card-bg-color);
  --input-surface-bg: var(--input-bg-light-no-glass);
  --table-surface-bg: var(--table-bg-light-no-glass);
  --thead-surface-bg: var(--thead-bg-light-no-glass);
  --status-filter-hover-bg: var(--status-filter-hover-bg-light-no-glass);
  --status-filter-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --tooltip-surface-bg: rgba(255, 255, 255, 0.90);
  --tooltip-border-color: rgba(226, 232, 240, 0.9);
  --tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --tooltip-text-color: rgb(51, 65, 85);
  --tooltip-backdrop-filter: none;
}

/* 暗色 + 玻璃关闭 */
:root.dark {
  --surface-bg: var(--dark-bg-color);
  --card-surface-bg: var(--dark-card-bg-color);
  --inner-surface-bg: var(--inner-container-bg-dark-no-glass);
  --inner-active-surface-bg: var(--inner-container-active-bg-dark-no-glass);
  --inner-container-shadow: var(--inner-container-shadow-dark);
  --small-element-surface-bg: var(--small-element-bg-dark-no-glass);
  --small-element-hover-surface-bg: var(--small-element-hover-bg-dark-no-glass);
  --overlay-surface-bg: var(--dark-card-bg-color);
  --input-surface-bg: var(--input-bg-dark-no-glass);
  --table-surface-bg: var(--table-bg-dark-no-glass);
  --thead-surface-bg: var(--thead-bg-dark-no-glass);
  --status-filter-hover-bg: var(--status-filter-hover-bg-dark-no-glass);
  --status-filter-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --tooltip-surface-bg: rgba(30, 41, 59, 0.88);
  --tooltip-border-color: rgba(71, 85, 105, 0.8);
  --tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --tooltip-text-color: rgb(226, 232, 240);
  --tooltip-backdrop-filter: none;
}

/* 亮色 + 玻璃开启 */
:root[data-glass='on']:not(.dark) {
  --card-surface-bg: rgba(var(--light-card-bg-color-rgb), var(--glass-light-opacity));
  --inner-surface-bg: var(--inner-container-bg-light-glass);
  --inner-active-surface-bg: var(--inner-container-active-bg-light-glass);
  --overlay-surface-bg: rgba(var(--light-card-bg-color-rgb), var(--glass-light-opacity));
  --small-element-surface-bg: var(--small-element-bg-light-glass);
  --small-element-hover-surface-bg: var(--small-element-hover-bg-light-glass);
  --input-surface-bg: var(--input-bg-light-glass);
  --table-surface-bg: var(--table-bg-light-glass);
  --thead-surface-bg: var(--thead-bg-light-glass);
  --status-filter-hover-bg: var(--status-filter-hover-bg-light-glass);
  --status-filter-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  --tooltip-surface-bg: rgba(255, 255, 255, 0.75);
  --tooltip-border-color: rgba(226, 232, 240, 0.8);
  --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --tooltip-text-color: rgb(51, 65, 85);
  --tooltip-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(100%) contrast(1.10);
}

/* 暗色 + 玻璃开启 */
:root.dark[data-glass='on'] {
  --card-surface-bg: rgba(var(--dark-card-bg-color-rgb), var(--glass-dark-opacity));
  --inner-surface-bg: var(--inner-container-bg-dark-glass);
  --inner-active-surface-bg: var(--inner-container-active-bg-dark-glass);
  --overlay-surface-bg: rgba(var(--dark-card-bg-color-rgb), var(--glass-dark-opacity));
  --small-element-surface-bg: var(--small-element-bg-dark-glass);
  --small-element-hover-surface-bg: var(--small-element-hover-bg-dark-glass);
  --input-surface-bg: var(--input-bg-dark-glass);
  --table-surface-bg: var(--table-bg-dark-glass);
  --thead-surface-bg: var(--thead-bg-dark-glass);
  --status-filter-hover-bg: var(--status-filter-hover-bg-dark-glass);
  --status-filter-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  --tooltip-surface-bg: rgba(var(--glass-dark-rgb), 0.30);
  --tooltip-border-color: rgba(71, 85, 105, 0.6);
  --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --tooltip-text-color: rgb(226, 232, 240);
  --tooltip-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(100%) contrast(1.06);
}