/* ============================================================
   TownSuite.Chat — DARK theme (default)
   Palette lifted from townsuite.com 2026 dark theme.
   Requires tokens.css loaded first.
   ============================================================ */

:root {
    color-scheme: dark;

    /* ---------- semantic palette ---------- */
    --bg: #071420;            /* app background                  */
    --bg2: #0A1B2A;           /* sidebar / quiet panels          */
    --surface: #0D2032;       /* cards, modals, input panel      */
    --surface2: #122A3F;      /* hover, secondary surfaces       */
    --ink: #E9F0F6;           /* primary text                    */
    --ink2: #A8BBCA;          /* secondary text                  */
    --ink3: #71879A;          /* muted text, icons               */
    --line: #1C3850;          /* hairline borders                */
    --line2: #27465F;         /* strong borders (inputs)         */

    --accent: #2D9CDE;        /* brand blue, lifted for dark     */
    --accent-strong: #5BB2EA;
    --accent-ink: #06131D;    /* text on accent                  */
    --accent-soft: #0F3A58;
    --accent-tint: #0C2C45;   /* selected / tinted backgrounds   */
    --halo: rgba(45,156,222,.14);

    --danger: #F06066;
    --danger-tint: rgba(224,58,62,.12);
    --success: #4CC46A;
    --success-tint: rgba(45,163,67,.12);
    --warning: #F0A23F;
    --warning-tint: rgba(228,141,26,.12);

    --code-bg: #06111B;
    --code-text: #D7E3EF;
    --backdrop: rgba(2,8,14,.6);

    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.3);
    --shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.42);
    --shadow-3: 0 8px 24px rgba(0,0,0,.45), 0 32px 80px rgba(0,0,0,.5);

    /* ============================================================
       Legacy variable aliases — keep every pre-redesign component
       coherent without touching its scoped CSS.
       ============================================================ */
    --primary-bg-color: var(--bg);
    --secondary-bg-color: var(--bg);
    --app-loader: var(--bg);
    --auth-card-bg: var(--surface);
    --index-dropdown-box: var(--surface);
    --login-chevron: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%), linear-gradient(var(--surface), var(--surface));
    --index-dropdown-select: var(--surface);
    --chat-message: var(--ink);
    --ask-ai-background: var(--surface);
    --powered-by: var(--ink3);
    --message-container: var(--surface2);
    --side-panel: var(--bg2);
    --chat-item: var(--ink2);
    --ask-ai-header: var(--ink);
    --ask-ai-subtitle: var(--ink2);
    --scrollbar-color: var(--line2);
    --user-chip: transparent;
    --user-chip-hover: var(--surface2);
    --user-drop-down: var(--surface);
    --side-panel-footer: var(--bg2);
    --user-drop-down-button: var(--ink);
    --user-name: var(--ink);
    --user-sub: var(--ink3);
    --avatar: var(--accent);
    --user-drop-down-button-hover: var(--surface2);
    --side-panel-item-hover: var(--surface2);
    --history-search: var(--surface);
    --dropdown-menu: var(--surface);
    --history-search-placeholder: var(--ink3);
    --dropdown-menu-button: var(--ink);
    --app-footer: transparent;
    --app-footer-font: var(--ink3);
    --start-chat-button: var(--accent);
    --chat-input: var(--surface);
    --chat-input-border-color: var(--line2);
    --side-panel-topic: var(--ink3);
    --start-chat-icon: var(--ink2);
    --sidebar-header: var(--bg2);
    --history-search-mob: var(--surface);
    --sidebar-close: var(--ink);
    --hamburger: var(--ink);
    --three-dot-button: var(--ink3);
    --settings-card-left: var(--bg2);
    --settings-card-top: var(--surface);
    --settings-card-right: var(--surface);
    --settings-card: var(--bg);
    --settings-header: var(--ink);
    --settings-section-header: var(--ink);
    --settings-card-small: var(--ink2);
    --memory-row: var(--bg);
    --memory-text: var(--ink);
    --feedback-cta: var(--bg);
    --feedback-cta-text: var(--ink);
    --nav-btn: var(--ink2);
    --feedback-cta-btn: var(--ink);
    --faq-inline-btn: var(--ink);
    --play-btn: var(--ink);
    --btn-primary: var(--accent-ink);
    --delete-all-btn: var(--danger);
    --confirm-modal: var(--surface);
    --cancel-btn: var(--ink);
    --cancel-btn-background: transparent;
    --confirm-dialog-header: var(--ink);
    --confirm-dialogue-icon: var(--ink);
    --settings-card-icon: var(--ink2);
    --faq-header: var(--ink);
    --faq-header-background: var(--surface);
    --faq-body-background: var(--bg);
    --faq-hover: var(--surface2);
    --faq-header-font: var(--ink);
    --faq-body-text: var(--ink2);
    --nav-btn-hover: var(--ink);
    --nav-btn-active: var(--accent-strong);
    --nav-button-background: var(--surface2);
    --feedback-modal: var(--surface);
    --feedback-textarea: var(--bg);
    --feedback-modal-header: var(--ink);
    --feedback-button: var(--accent-ink);
    --cancel-button: var(--ink);
    --profile-modal-headers: var(--ink);
    --profile-modal-cards: var(--bg);
    --profile-modal-body: var(--surface);
    --profile-modal-small-text: var(--ink2);
    --muted: var(--ink2);
    --save-name-button: var(--accent-ink);
    --icon-button-profile: var(--ink2);
    --disclaimer-text: var(--ink2);
    --lang-row: var(--ink);
    --login-label: var(--ink2);
    --chat-input-message: var(--ink);
    --history-search-text: var(--ink);
    --paper-plane-button: var(--accent-ink);
    --pause-button: var(--danger);
    --search-mode-description: var(--ink3);
    --search-mode-icon: var(--accent);
    --icon-btns: var(--ink2);
    --side-rail-btn: var(--ink2);
    --user-chev: var(--ink3);

    /* user message navigator (right-edge rail) */
    --message-nav-rail-bg: var(--line);
    --message-nav-rail-bg-hover: var(--line2);
    --message-nav-dash: var(--ink3);
    --message-nav-dash-hover: var(--ink);
    --message-nav-panel-bg: var(--surface);
    --message-nav-panel-border: var(--line2);
    --message-nav-panel-shadow: rgba(0, 0, 0, .38);
    --message-nav-item-bg: var(--surface2);
    --message-nav-item-hover: var(--accent-tint);
    --message-nav-text: var(--ink);
    --message-nav-highlight-bg: var(--accent-tint);
    --message-nav-highlight-shadow: var(--accent-soft);
}