:root {
    /* Brand */
    --color-primary:        #2980b9;
    --color-primary-dark:   #1a5f8a;
    --color-primary-light:  #d6eaf8;
    --color-accent:         #27ae60;
    --color-danger:         #e74c3c;
    --color-warning:        #f39c12;
    --brand:                #2980b9;
    --surface-1:            #ffffff;
    --surface-2:            #f0f2f5;
    --surface-3:            #e9edef;
    --border:               #d1d7db;

    /* Surfaces */
    --bg-app:               #f0f2f5;
    --bg-sidebar:           #ffffff;
    --bg-chat:              #eae6df;
    --bg-bubble-out:        #dcf8c6;
    --bg-bubble-in:         #ffffff;
    --bg-input:             #ffffff;
    --bg-header:            #2980b9;
    --bg-hover:             #f5f5f5;
    --bg-selected:          #e8f4fd;
    --bg-internal-note:     #fff9e6;

    /* Text */
    --text-primary:         #111b21;
    --text-secondary:       #667781;
    --text-muted:           #8696a0;
    --text-on-primary:      #ffffff;
    --text-bubble-out:      #111b21;
    --text-bubble-in:       #111b21;

    /* Borders */
    --border-light:         #e9edef;
    --border-medium:        #d1d7db;

    /* Sizing */
    --sidebar-w:            360px;
    --header-h:             60px;
    --input-area-h:         70px;
    --bubble-max-w:         65%;
    --avatar-size:          46px;

    /* Radius */
    --radius-sm:            6px;
    --radius-md:            10px;
    --radius-lg:            18px;
    --radius-full:          999px;

    /* Shadow */
    --shadow-sm:            0 1px 3px rgba(0,0,0,.12);
    --shadow-md:            0 4px 12px rgba(0,0,0,.15);
    --shadow-lg:            0 8px 24px rgba(0,0,0,.18);

    /* Transition */
    --transition:           0.18s ease;

    /* Z-index */
    --z-sidebar:            10;
    --z-header:             20;
    --z-modal:              100;
    --z-widget:             9999;
    --z-toast:              10000;
}