:root,
html[data-theme="light"] {
    --chat-font: var(--font-sans);
    --chat-font-fa: var(--font-fa);

    --chat-bg: #f7f7f8;
    --chat-bg-main: #ffffff;
    --chat-bg-sidebar: #f3f4f6;
    --chat-bg-elevated: #ffffff;
    --chat-bg-hover: rgba(0, 0, 0, 0.045);
    --chat-bg-active: rgba(0, 0, 0, 0.07);
    --chat-bg-composer: #f4f4f4;

    --chat-border: rgba(0, 0, 0, 0.06);
    --chat-border-strong: rgba(0, 0, 0, 0.08);

    --chat-text: #111827;
    --chat-text-secondary: #4b5563;
    --chat-text-muted: #9ca3af;

    --chat-accent: #2563eb;
    --chat-accent-strong: #1d4ed8;
    --chat-accent-soft: #eff6ff;
    --chat-brand: #0f172a;
    --chat-dot: #3b82f6;
    --chat-danger: #dc2626;

    --chat-shadow-composer: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(15, 23, 42, 0.06);
    --chat-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.05);
    --chat-shadow-drawer: 12px 0 40px rgba(15, 23, 42, 0.12);
    --chat-sidebar-gradient: linear-gradient(180deg, #f6f7f9 0%, #eef0f3 100%);
    --chat-main-glow: rgba(37, 99, 235, 0.06);

    --chat-radius-sm: 10px;
    --chat-radius-md: 14px;
    --chat-radius-lg: 22px;
    --chat-radius-pill: 999px;

    --chat-sidebar-width: 280px;
    --chat-topbar-height: 58px;
    --chat-stage-max: 768px;
    --chat-safe-bottom: env(safe-area-inset-bottom, 0px);
    --chat-safe-top: env(safe-area-inset-top, 0px);

    --chat-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="dark"] {
    --chat-bg: #070b14;
    --chat-bg-main: #0b1220;
    --chat-bg-sidebar: #0e1526;
    --chat-bg-elevated: #151d31;
    --chat-bg-hover: rgba(255, 255, 255, 0.06);
    --chat-bg-active: rgba(255, 255, 255, 0.1);
    --chat-bg-composer: #121a2d;

    --chat-border: rgba(255, 255, 255, 0.08);
    --chat-border-strong: rgba(255, 255, 255, 0.14);

    --chat-text: #eef2ff;
    --chat-text-secondary: #b6c0d6;
    --chat-text-muted: #8490a8;

    --chat-accent: #60a5fa;
    --chat-accent-strong: #93c5fd;
    --chat-accent-soft: rgba(96, 165, 250, 0.14);
    --chat-brand: #f8fafc;
    --chat-dot: #60a5fa;
    --chat-danger: #f87171;

    --chat-shadow-composer: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.35);
    --chat-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
    --chat-shadow-drawer: 12px 0 40px rgba(0, 0, 0, 0.45);
    --chat-sidebar-gradient: linear-gradient(180deg, #10182a 0%, #0b1220 100%);
    --chat-main-glow: rgba(96, 165, 250, 0.08);
}