:root {

    /* ==========================
       CORE BRAND COLORS
    ========================== */

    --sky-primary: #373ba0;
    --sky-primary-hover: #0a63e8;

    --sky-surface: #ffffff;
    --sky-surface-secondary: #f8fafc;

    --sky-border: #dddddd;

    --sky-text: #212529;
    --sky-text-secondary: #6b7280;
    --sky-text-inverse: #ffffff;

    /* ==========================
       CHAT SYSTEM COLORS
    ========================== */

    --sky-chat-user: rgba(31, 111, 235, 0.18);
    --sky-chat-user-hover: rgba(31, 111, 235, 0.25);

    --sky-chat-bot: #e9ecef;

    --sky-body-background: #ffffff;

    /* ==========================
       SIDEBAR / WORKSPACE
    ========================== */

    --sky-sidebar-bg: #0f172a;
    --sky-sidebar-surface: #1e293b;

    --sky-workspace-bg: #f7f9ff;

    /* ==========================
       OVERLAY / EFFECTS
    ========================== */

    --sky-overlay: rgba(0,0,0,.4);

    /* ==========================
       INTERACTION COLORS
    ========================== */

    --sky-scroll-indicator: #1414c8;

    --sky-pulse-ring: rgba(13,110,253,.5);

    --sky-focus-outline: var(--sky-primary);

    /* ==========================
       BUTTONS (CHAT FLOATING)
    ========================== */

    --sky-chat-button-bg: var(--sky-primary);
    --sky-chat-button-hover: var(--sky-primary-hover);
    --sky-chat-button-text: var(--sky-text-inverse);

    /* ==========================
       CHAT ACTIONS
    ========================== */

    --sky-action-hover-bg: rgba(255,255,255,.2);
    --sky-action-focus: #ffffff;

    /* ==========================
       CLOSE BUTTON
    ========================== */

    --sky-close-btn-bg: rgba(255,255,255,.15);
    --sky-close-btn-hover: rgba(255,255,255,.3);
    --sky-close-btn-active: rgba(255,255,255,.45);

    /* ==========================
       LAYOUT
    ========================== */

    --chat-footer-height: 80px;
}