: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-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-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);
}