/* 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 color-mix(in srgb, var(--dark-bg-color) 10%, transparent);
  --tooltip-surface-bg: rgba(var(--light-card-bg-color-rgb), 0.90);
  --tooltip-border-color: var(--no-glass-overlay-border-color);
  --tooltip-shadow: 0 2px 8px color-mix(in srgb, var(--dark-bg-color) 15%, transparent);
  --tooltip-text-color: var(--no-glass-overlay-text-color);
  --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 color-mix(in srgb, var(--dark-bg-color) 25%, transparent);
  --tooltip-surface-bg: color-mix(in srgb, var(--no-glass-overlay-bg) 92.63%, transparent);
  --tooltip-border-color: rgba(var(--dark-border-color-rgb), 0.8);
  --tooltip-shadow: 0 2px 8px color-mix(in srgb, var(--dark-bg-color) 40%, transparent);
  --tooltip-text-color: var(--no-glass-overlay-text-color);
  --tooltip-backdrop-filter: none;
}

/* 亮色 + 玻璃开启 */
:root[data-glass='on']:not(.dark) {
  --card-surface-bg: var(--card-bg-light-glass);
  --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 color-mix(in srgb, var(--dark-bg-color) 8%, transparent);
  --tooltip-surface-bg: color-mix(in srgb, var(--glass-overlay-bg) 93.75%, transparent);
  --tooltip-border-color: color-mix(in srgb, var(--glass-overlay-border-color) 88.89%, transparent);
  --tooltip-shadow: 0 4px 12px color-mix(in srgb, var(--dark-bg-color) 12%, transparent), 0 2px 4px color-mix(in srgb, var(--dark-bg-color) 8%, transparent);
  --tooltip-text-color: var(--glass-overlay-text-color);
  --tooltip-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(100%) contrast(1.10);
}

/* 暗色 + 玻璃开启 */
:root.dark[data-glass='on'] {
  --card-surface-bg: var(--card-bg-dark-glass);
  --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 color-mix(in srgb, var(--dark-bg-color) 20%, transparent);
  --tooltip-surface-bg: rgba(var(--glass-dark-rgb), 0.30);
  --tooltip-border-color: var(--glass-overlay-border-color);
  --tooltip-shadow: 0 4px 12px color-mix(in srgb, var(--dark-bg-color) 40%, transparent), 0 2px 4px color-mix(in srgb, var(--dark-bg-color) 30%, transparent);
  --tooltip-text-color: var(--glass-overlay-text-color);
  --tooltip-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(100%) contrast(1.06);
}