:root {
    /* Colors */
    --color-primary-red: #f5432f;
    --color-primary-yellow: #fbae0f;
    --color-primary-green: #0d666b;
    --color-primary-blue: #112a34;

    --color-bg-cream-brand: #fdf6ed;
    --color-bg-cream: var(--color-bg-cream-brand);
    --color-bg-white: #ffffff;

    --color-bubble-grey: #c0b1a5;

    --color-text-charcoal: #112a34;
    --color-text-body: #334e58;

    --color-border-light: #e0d6cc;
    --color-danger: #d93025;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(17, 42, 52, 0.05);
    /* Semantic Tokens (Light Default) */
    --color-surface: #ffffff;
    --color-surface-alt: #faf9f7;
    --color-surface-input: #ffffff;
    --color-surface-panel: #ffffff;
    --color-surface-active: #e7f2f5;
    --color-surface-pilled: #ffffff;

    --color-text-primary: var(--color-text-charcoal);
    --color-text-secondary: var(--color-text-body);
    --color-text-placeholder: #7b8d94;
    --color-text-inverse: #ffffff;
    --color-text-link: var(--color-primary-red);

    --color-border: var(--color-border-light);

    --color-bot-bubble-bg: #f0f2f5;
    --color-user-bubble-bg: var(--color-primary-blue);

    --shadow-md: 0 8px 24px rgba(17, 42, 52, 0.08);
    --shadow-lg: 0 12px 32px rgba(17, 42, 52, 0.12);

    /* Chat specifics (optional defaults) */
    --chat-width: 800px;
}

:root[data-theme="dark"] {
    /* Base Colors mapped for Dark Mode */
    --color-bg-cream: #1a1a1a;
    /* Global app bg */
    --color-bg-white: #2d2d2d;
    /* Replaces white generically if used directly */
    --color-primary-light: #ff8a7a;
    /* Lighter red for text */

    /* Semantic Overrides */
    --color-surface: #2d2d2d;
    --color-surface-alt: #1e1e1e;
    /* Slightly darker/different for separation */
    --color-surface-input: #383838;
    --color-surface-panel: #2d2d2d;
    --color-surface-active: #383838;
    --color-surface-pilled: #4a4a4a;

    --color-text-primary: #f0f0f0;
    --color-text-secondary: #aaaaaa;
    --color-text-placeholder: #7f8790;
    --color-text-inverse: #112a34;
    /* Dark text on light elements if needed */
    --color-text-link: var(--color-primary-light);

    --color-border: #444444;
    --color-border-light: #444444;
    /* Keep consistent */

    --color-bot-bubble-bg: #383838;

    --color-text-charcoal: #f0f0f0;
    --color-text-body: #cfcfcf;

    --color-bubble-grey: #4a4a4a;

    /* Adjust primary colors interactions if needed, or keep brand colors */
    --color-primary-blue: #6eccdf;
    /* Lighter blue for dark mode readability */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/*
 * Client-wide appearance mode.
 * Flow: docs/agent/flows/features/idea-197-admin-ui-style-switch.mmd
 */
:root[data-ui-style="quiet"] {
    --quiet-canvas: #f5f7f9;
    --quiet-surface: #ffffff;
    --quiet-surface-subtle: #f0f3f5;
    --quiet-surface-active: #e8eef2;
    --quiet-ink: #112a34;
    --quiet-ink-muted: #53656f;
    --quiet-line: #dce2e6;
    --quiet-line-strong: #c9d2d8;
    --quiet-navy-hover: #1a3b49;
    --quiet-coral: var(--color-primary-red);

    --color-bg-cream: var(--quiet-canvas);
    --color-bg-white: var(--quiet-surface);
    --color-surface: var(--quiet-surface);
    --color-surface-alt: var(--quiet-surface-subtle);
    --color-surface-input: var(--quiet-surface);
    --color-surface-panel: var(--quiet-surface);
    --color-surface-active: var(--quiet-surface-active);
    --color-surface-pilled: var(--quiet-surface-subtle);
    --color-text-primary: var(--quiet-ink);
    --color-text-secondary: var(--quiet-ink-muted);
    --color-text-charcoal: var(--quiet-ink);
    --color-text-body: var(--quiet-ink-muted);
    --color-text-placeholder: #788891;
    --color-text-link: var(--quiet-ink);
    --color-border: var(--quiet-line);
    --color-border-light: var(--quiet-line);
    --color-bot-bubble-bg: transparent;
    --color-user-bubble-bg: #112a34;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(17, 42, 52, 0.06);
    --shadow-md: 0 5px 16px rgba(17, 42, 52, 0.10);
    --shadow-lg: 0 16px 36px rgba(17, 42, 52, 0.16);
}

:root[data-ui-style="quiet"][data-theme="dark"] {
    --quiet-canvas: #0e151a;
    --quiet-surface: #151e24;
    --quiet-surface-subtle: #111a20;
    --quiet-surface-active: #20303a;
    --quiet-ink: #edf2f5;
    --quiet-ink-muted: #9eacb4;
    --quiet-line: #2b3942;
    --quiet-line-strong: #3b4b55;
    --quiet-navy-hover: #d6e2e8;

    --color-primary-blue: #b9cdd7;
    --color-surface-input: #19242c;
    --color-surface-pilled: #223039;
    --color-text-body: #c3cdd2;
    --color-text-placeholder: #7f9099;
    --color-text-inverse: #ffffff;
    --color-text-link: #b9cdd7;
    --color-bot-bubble-bg: transparent;
    --color-user-bubble-bg: #112a34;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.42);
}