/* 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='claude'] {
    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;
    --claude-bg: #f5f5f4;
    --claude-panel: rgba(255, 255, 255, 0.97);
    --claude-left-rail: #faf9f7;
    --claude-sidebar: rgba(255, 255, 255, 0.94);
    --claude-border: rgba(26, 27, 30, 0.12);
    --claude-border-strong: rgba(26, 27, 30, 0.2);
    --claude-text: #1b1c1f;
    --claude-text-secondary: #3c3f46;
    --claude-text-tertiary: #5a5f69;
    --claude-muted: rgba(27, 28, 31, 0.28);
    --claude-accent: #4a4f58;
    --claude-accent-strong: #2f343d;
    --claude-deep: #6b6f78;
    --claude-deep-strong: #4d515a;
    --claude-highlight: rgba(74, 79, 88, 0.12);
    --claude-button-hover: #3d424b;
    --claude-button-active: #2f343c;
    --claude-shadow: 0 16px 40px rgba(27, 28, 31, 0.12);
    --claude-success: #3f6f4f;
    --claude-warning: #7a6a3a;
    --theme-surface-card: #ffffff;
    --theme-surface-strong: #ffffff;
    --theme-surface-soft: rgba(255, 255, 255, 0.98);
    --theme-surface-muted: rgba(255, 255, 255, 0.94);
    --theme-overlay-scrim: rgba(17, 16, 14, 0.45);
    --theme-shadow-strong: 0 32px 72px rgba(17, 16, 14, 0.18);
    --theme-shadow-soft: 0 18px 42px rgba(17, 16, 14, 0.12);
    --theme-shadow-mid: 0 20px 45px rgba(17, 16, 14, 0.1);
    --theme-control-border: rgba(26, 27, 30, 0.12);
    --theme-control-border-strong: rgba(26, 27, 30, 0.2);
    --theme-switch-track: #dededd;
    --theme-chip-bg: rgba(74, 79, 88, 0.08);
    --theme-chip-border: rgba(74, 79, 88, 0.18);
    --theme-badge-bg: rgba(74, 79, 88, 0.14);
    --theme-tab-active: rgba(74, 79, 88, 0.12);
    --theme-mobile-menu: rgba(255, 255, 255, 0.88);
    --theme-mobile-menu-shadow: 0 14px 32px rgba(17, 16, 14, 0.16);
    --theme-card-border-strong: rgba(26, 27, 30, 0.18);
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --claude-bg: #08090d;
    --claude-panel: rgba(16, 17, 23, 0.92);
    --claude-left-rail: #0b0c11;
    --claude-sidebar: rgba(13, 14, 19, 0.94);
    --claude-border: rgba(255, 255, 255, 0.08);
    --claude-border-strong: rgba(255, 255, 255, 0.14);
    --claude-text: #f8f9fc;
    --claude-text-secondary: #d7dbe8;
    --claude-text-tertiary: #aeb6c7;
    --claude-muted: rgba(248, 249, 252, 0.22);
    --claude-accent: #62e0d2;
    --claude-accent-strong: #3bb8aa;
    --claude-deep: #8cc7ff;
    --claude-deep-strong: #5b9fe6;
    --claude-highlight: rgba(98, 224, 210, 0.2);
    --claude-button-hover: #4ac8ba;
    --claude-button-active: #37aa9e;
    --claude-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    --claude-success: #82e8b3;
    --claude-warning: #f0c76a;
    --theme-surface-card: #0f1117;
    --theme-surface-strong: #141823;
    --theme-surface-soft: rgba(20, 24, 35, 0.95);
    --theme-surface-muted: rgba(16, 19, 28, 0.92);
    --theme-overlay-scrim: rgba(0, 0, 0, 0.72);
    --theme-shadow-strong: 0 32px 80px rgba(0, 0, 0, 0.7);
    --theme-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.55);
    --theme-shadow-mid: 0 22px 50px rgba(0, 0, 0, 0.5);
    --theme-control-border: rgba(255, 255, 255, 0.1);
    --theme-control-border-strong: rgba(255, 255, 255, 0.16);
    --theme-switch-track: #262b34;
    --theme-chip-bg: rgba(98, 224, 210, 0.14);
    --theme-chip-border: rgba(98, 224, 210, 0.26);
    --theme-badge-bg: rgba(98, 224, 210, 0.18);
    --theme-tab-active: rgba(98, 224, 210, 0.16);
    --theme-mobile-menu: rgba(16, 19, 28, 0.78);
    --theme-mobile-menu-shadow: 0 18px 40px rgba(0, 0, 0, 0.62);
    --theme-card-border-strong: rgba(255, 255, 255, 0.16);
}
