/* CSS variables + shared design tokens */

:root {
    color-scheme: light;
    --app-viewport: 100vh;
    --app-bottom-inset: env(safe-area-inset-bottom, 0px);
    --claude-bg: #eeece2;
    --claude-panel: rgba(255, 255, 255, 0.82);
    --claude-left-rail: #f7f3ea;
    --claude-sidebar: rgba(255, 255, 255, 0.68);
    --claude-border: rgba(118, 103, 84, 0.25);
    --claude-border-strong: rgba(118, 103, 84, 0.35);
    --claude-text: #3d3929;
    --claude-text-secondary: #7f7766;
    --claude-text-tertiary: #a59a86;
    --claude-muted: rgba(121, 109, 94, 0.4);
    --claude-accent: #da7756;
    --claude-accent-strong: #bd5d3a;
    --claude-deep: #f2a93b;
    --claude-deep-strong: #d07a14;
    --claude-highlight: rgba(218, 119, 86, 0.14);
    --claude-button-hover: #c76541;
    --claude-button-active: #a95331;
    --claude-shadow: 0 14px 36px rgba(61, 57, 41, 0.12);
    --claude-success: #76b086;
    --claude-warning: #d99845;
    /* Theme-neutral surfaces */
    --theme-surface-card: #fffaf4;
    --theme-surface-strong: #ffffff;
    --theme-surface-soft: rgba(255, 255, 255, 0.92);
    --theme-surface-muted: rgba(255, 255, 255, 0.85);
    --theme-overlay-scrim: rgba(33, 24, 14, 0.55);
    --theme-shadow-strong: 0 28px 60px rgba(38, 28, 18, 0.25);
    --theme-shadow-soft: 0 12px 24px rgba(38, 28, 18, 0.12);
    --theme-shadow-mid: 0 20px 45px rgba(16, 24, 40, 0.08);
    --theme-control-border: rgba(118, 103, 84, 0.25);
    --theme-control-border-strong: rgba(118, 103, 84, 0.35);
    --theme-switch-track: #d7d1c5;
    --theme-chip-bg: rgba(118, 103, 84, 0.08);
    --theme-chip-border: rgba(118, 103, 84, 0.2);
    --theme-badge-bg: rgba(118, 103, 84, 0.12);
    --theme-tab-active: rgba(189, 93, 58, 0.12);
    --theme-mobile-menu: rgba(255, 255, 255, 0.35);
    --theme-mobile-menu-shadow: 0 12px 30px rgba(38, 28, 18, 0.15);
    --theme-card-border-strong: rgba(118, 103, 84, 0.25);
}

:root[data-theme='classic'] {
    color-scheme: light;
    --claude-bg: #eeece2;
    --claude-panel: rgba(255, 255, 255, 0.82);
    --claude-left-rail: #f7f3ea;
    --claude-sidebar: rgba(255, 255, 255, 0.68);
    --claude-border: rgba(118, 103, 84, 0.25);
    --claude-border-strong: rgba(118, 103, 84, 0.35);
    --claude-text: #3d3929;
    --claude-text-secondary: #7f7766;
    --claude-text-tertiary: #a59a86;
    --claude-muted: rgba(121, 109, 94, 0.4);
    --claude-accent: #da7756;
    --claude-accent-strong: #bd5d3a;
    --claude-deep: #f2a93b;
    --claude-deep-strong: #d07a14;
    --claude-highlight: rgba(218, 119, 86, 0.14);
    --claude-button-hover: #c76541;
    --claude-button-active: #a95331;
    --claude-shadow: 0 14px 36px rgba(61, 57, 41, 0.12);
    --claude-success: #76b086;
    --claude-warning: #d99845;
    --theme-surface-card: #fffaf4;
    --theme-surface-strong: #ffffff;
    --theme-surface-soft: rgba(255, 255, 255, 0.92);
    --theme-surface-muted: rgba(255, 255, 255, 0.85);
    --theme-overlay-scrim: rgba(33, 24, 14, 0.55);
    --theme-shadow-strong: 0 28px 60px rgba(38, 28, 18, 0.25);
    --theme-shadow-soft: 0 12px 24px rgba(38, 28, 18, 0.12);
    --theme-shadow-mid: 0 20px 45px rgba(16, 24, 40, 0.08);
    --theme-control-border: rgba(118, 103, 84, 0.25);
    --theme-control-border-strong: rgba(118, 103, 84, 0.35);
    --theme-switch-track: #d7d1c5;
    --theme-chip-bg: rgba(118, 103, 84, 0.08);
    --theme-chip-border: rgba(118, 103, 84, 0.2);
    --theme-badge-bg: rgba(118, 103, 84, 0.12);
    --theme-tab-active: rgba(189, 93, 58, 0.12);
    --theme-mobile-menu: rgba(255, 255, 255, 0.35);
    --theme-mobile-menu-shadow: 0 12px 30px rgba(38, 28, 18, 0.15);
    --theme-card-border-strong: rgba(118, 103, 84, 0.25);
}

:root[data-theme='light'] {
    color-scheme: light;
    /* 类似 ChatGPT 的明亮配色：白底黑字，优雅浅灰 */
    --claude-bg: #ffffff;
    --claude-panel: #ffffff;
    --claude-left-rail: #f9f9f9;
    --claude-sidebar: #ffffff;
    --claude-border: rgba(0, 0, 0, 0.08);
    --claude-border-strong: rgba(0, 0, 0, 0.12);
    --claude-text: #0d0d0d;
    --claude-text-secondary: #676767;
    --claude-text-tertiary: #8e8e8e;
    --claude-muted: rgba(0, 0, 0, 0.3);
    --claude-accent: #acacac;
    --claude-accent-strong: #8e8e8e;
    --claude-deep: #c4c4c4;
    --claude-deep-strong: #acacac;
    --claude-highlight: rgba(0, 0, 0, 0.05);
    --claude-button-hover: #d1d1d1;
    --claude-button-active: #acacac;
    --claude-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --claude-success: #10b981;
    --claude-warning: #f59e0b;
    --theme-surface-card: #ffffff;
    --theme-surface-strong: #ffffff;
    --theme-surface-soft: #ffffff;
    --theme-surface-muted: #fafafa;
    --theme-overlay-scrim: rgba(0, 0, 0, 0.5);
    --theme-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.08);
    --theme-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
    --theme-shadow-mid: 0 1px 3px rgba(0, 0, 0, 0.06);
    --theme-control-border: rgba(0, 0, 0, 0.08);
    --theme-control-border-strong: rgba(0, 0, 0, 0.12);
    --theme-switch-track: #ececec;
    --theme-chip-bg: #f5f5f5;
    --theme-chip-border: rgba(0, 0, 0, 0.08);
    --theme-badge-bg: #f5f5f5;
    --theme-tab-active: rgba(0, 0, 0, 0.05);
    --theme-mobile-menu: rgba(255, 255, 255, 0.95);
    --theme-mobile-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --theme-card-border-strong: rgba(0, 0, 0, 0.1);
}

:root[data-theme='dark'] {
    color-scheme: dark;
    /* 暗色主题：灰黑色底色，白色文字 */
    --claude-bg: #1a1a1a;
    --claude-panel: #1a1a1a;
    --claude-left-rail: #0a0a0a;
    --claude-sidebar: #0a0a0a;
    --claude-border: rgba(255, 255, 255, 0.08);
    --claude-border-strong: rgba(255, 255, 255, 0.12);
    --claude-text: #ffffff;
    --claude-text-secondary: #a0a0a0;
    --claude-text-tertiary: #707070;
    --claude-muted: rgba(255, 255, 255, 0.3);
    --claude-accent: #606060;
    --claude-accent-strong: #505050;
    --claude-deep: #808080;
    --claude-deep-strong: #606060;
    --claude-highlight: rgba(255, 255, 255, 0.05);
    --claude-button-hover: #707070;
    --claude-button-active: #505050;
    --claude-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --claude-success: #10b981;
    --claude-warning: #f59e0b;
    --theme-surface-card: #0a0a0a;
    --theme-surface-strong: #1a1a1a;
    --theme-surface-soft: #0f0f0f;
    --theme-surface-muted: #141414;
    --theme-overlay-scrim: rgba(0, 0, 0, 0.8);
    --theme-shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.6);
    --theme-shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.4);
    --theme-shadow-mid: 0 3px 8px rgba(0, 0, 0, 0.5);
    --theme-control-border: rgba(255, 255, 255, 0.08);
    --theme-control-border-strong: rgba(255, 255, 255, 0.12);
    --theme-switch-track: #2a2a2a;
    --theme-chip-bg: #2a2a2a;
    --theme-chip-border: rgba(255, 255, 255, 0.08);
    --theme-badge-bg: #2a2a2a;
    --theme-tab-active: rgba(255, 255, 255, 0.05);
    --theme-mobile-menu: rgba(10, 10, 10, 0.95);
    --theme-mobile-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    --theme-card-border-strong: rgba(255, 255, 255, 0.1);
}
