/* ══════════════════════════════════════════════════════════════════
   OPTIONALITY — Universal Design Tokens
   Single source of truth for the entire UI color palette.

   All pages, widgets, components, and sub-pages must reference
   these variables instead of hardcoding colors locally.

   Current theme: Dark Premium (Financial Terminal Aesthetic)
   ══════════════════════════════════════════════════════════════════ */

:root {

    /* ── Base Surfaces ──────────────────────────────────────────── */
    --db-bg:              #0B1020;  /* app background                */
    --db-bg-deep:         #0B1220;  /* deeper background (chat, composer) */
    --db-bg-elevated:     #0F172A;  /* slightly lifted surface        */
    --db-sidebar:         #10192B;  /* sidebar / nav background      */
    --db-card:            #162033;  /* standard card background       */
    --db-card-alt:        #1B2740;  /* elevated / featured cards      */
    --db-card-raised:     #213050;  /* raised surface (chat, panels)  */
    --db-tooltip-bg:      #0E1628;  /* tooltip background             */
    --db-input-bg:        #0F1A2E;  /* form input background          */
    --db-overlay-btn:     rgba(11,18,32,0.96); /* floating buttons on surfaces */
    --db-overlay-btn-bar: var(--db-text-readable);   /* icon/bar color on overlay btns  */

    /* ── Text Hierarchy ─────────────────────────────────────────── */
    --db-text:            #F8FAFC;  /* primary text                   */
    --db-text-secondary:  #94A3B8;  /* secondary / supporting text    */
    --db-text-readable:   #E2E8F0;  /* high-readability body text     */
    --db-text-muted:      #7C8AA5;  /* muted labels, captions         */
    --db-text-inverse:    #0f172a;  /* text on light backgrounds      */

    /* ── Borders ────────────────────────────────────────────────── */
    --db-border:          rgba(255,255,255,0.06);  /* subtle dividers       */
    --db-border-strong:   rgba(255,255,255,0.12);  /* emphasized borders    */
    --db-border-accent:   rgba(124,131,255,0.20);  /* accent-tinted borders */
    --db-border-focus:    rgba(124,131,255,0.50);  /* focus ring            */

    /* ── Brand / Accent ─────────────────────────────────────────── */
    --db-accent:          #7C83FF;  /* primary accent (buttons, links, active states) */
    --db-accent-start:    #7C83FF;  /* gradient start                 */
    --db-accent-end:      #6B72E8;  /* gradient end / pressed state   */
    --db-accent-hover:    #9DA3FF;  /* accent hover state             */
    --db-accent-subtle:   rgba(124,131,255,0.10);  /* accent tint for backgrounds */

    /* ── Semantic Colors ────────────────────────────────────────── */
    --db-positive:        #2ED47A;  /* success, gains, good status    */
    --db-positive-subtle: rgba(46,212,122,0.10);   /* success background    */
    --db-risk:            #E9A23B;  /* warning, risk, caution         */
    --db-risk-subtle:     rgba(233,162,59,0.10);    /* warning background    */
    --db-danger:          #EF4444;  /* error, loss, critical          */
    --db-danger-subtle:   rgba(239,68,68,0.10);     /* danger background     */
    --db-info:            #38BDF8;  /* informational highlights        */

    /* ── Chart / Allocation Colors ─────────────────────────────── */
    --chart-equity:       #818cf8;  /* equities / stocks              */
    --chart-bonds:        #34d399;  /* bonds / pension                */
    --chart-cash:         #f59e0b;  /* cash / savings                 */
    --chart-real-estate:  #06b6d4;  /* real estate                    */
    --chart-alt-1:        #f472b6;  /* angel / alternatives           */
    --chart-alt-2:        #a78bfa;  /* collectibles / other           */
    --chart-alt-3:        #fb923c;  /* entities / overflow            */

    /* ── Chat Bubble Colors ────────────────────────────────────── */
    --chat-bubble-user:        rgba(99,102,241,0.32);   /* user message background  */
    --chat-bubble-user-text:   #F8FAFC;                 /* user message text        */
    --chat-bubble-user-border: rgba(99,102,241,0.45);   /* user message border      */
    --chat-bubble-ai:          var(--db-card);           /* assistant msg background */
    --chat-bubble-ai-text:     #E2E8F0;                 /* assistant msg text       */
    --chat-bubble-ai-border:   var(--db-border);         /* assistant msg border     */

    /* ── Chat Chart Colors ─────────────────────────────────────── */
    --chat-chart-bg:           rgba(255,255,255,0.03);  /* chart card background    */
    --chat-chart-border:       var(--db-border);         /* chart card border        */
    --chat-chart-grid:         rgba(255,255,255,0.08);  /* axis grid lines          */
    --chat-chart-label:        #94A3B8;                 /* axis labels / ticks      */
    --chat-chart-center-text:  #F8FAFC;                 /* donut center value       */

    /* ── Interactive States ──────────────────────────────────────── */
    --db-hover:           rgba(255,255,255,0.03);  /* row / card hover       */
    --db-active:          rgba(255,255,255,0.06);  /* pressed / active state  */
    --db-selected:        rgba(99,102,241,0.08);   /* selected row / item     */
    --db-selected-hover:  rgba(99,102,241,0.12);   /* selected + hover        */

    /* ── Spacing Scale (4pt grid) ────────────────────────────────── */
    --space-1:  4px;   /* micro: icon gaps, inline spacing        */
    --space-2:  8px;   /* tight: label-to-value, badge padding    */
    --space-3:  12px;  /* compact: inner card gaps, form spacing  */
    --space-4:  16px;  /* standard: card padding, grid gaps       */
    --space-5:  20px;  /* comfortable: card padding horizontal    */
    --space-6:  24px;  /* section: card padding desktop, gaps     */
    --space-7:  32px;  /* major: section spacing, page gutter     */
    --space-8:  40px;  /* page: page-level horizontal padding     */
    --space-9:  48px;  /* hero: page bottom padding, large gaps   */
}