/* ─────────────────────────────────────────────
   LIGHT MODE  (default)
   ───────────────────────────────────────────── */
   :root {
    /* Page backgrounds */
    --color-bg:               #F2F1EE;
    --color-surface:          #EAEAE7;
    --color-surface-raised:   #ffffff;

    /* Borders */
    --color-border:           #cccccc;

    /* Text */
    --color-text-primary:     #1a1a1a;
    --color-text-secondary:   #333333;
    --color-text-muted:       #757575;
    --color-text-nav:         #606683;

    /* Interactive / Brand */
    --color-accent:           #3F8CD1;

    /* Navbar */
    --color-nav-bg:           #cccccc;
    --color-nav-hover:        #a7bbd8;
    --color-nav-border:       #999999;

    /* Buttons & Inputs */
    --color-btn-bg:           #e4e4e4;
    --color-btn-hover:        #d2d2d2;
    --color-input-border:     #888888;

    /* Status colors */
    --color-streaming-bg:     #e9f6ff;
    --color-streaming-border: #7bb5e7;
    --color-neutral-bg:       #d3d3d3;
    --color-error-bg:         #ffe6e6;
    --color-error-border:     #e07e7e;
    --color-open-bg:          #d8f0e0;
    --color-open-border:      #76CD91;

    /* Danger / Destructive */
    --color-danger:           #d9534f;
    --color-danger-hover:     #a02020;
    --color-danger-muted:     #e07e7e;

    /* Positive indicator */
    --color-positive:         #76CD91;

    /* Overlays & Shadows */
    --color-modal-overlay:    rgba(0, 0, 0, 0.2);
    --color-shadow:           rgba(0, 0, 0, 0.1);
}


/* ─────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────── */
[data-theme="dark"] {
    /* Page backgrounds */
    --color-bg:               #1a1a1e;
    --color-surface:          #26262d;
    --color-surface-raised:   #35353f;

    /* Borders */
    --color-border:           #444455;

    /* Text */
    --color-text-primary:     #e8e8e8;
    --color-text-secondary:   #c0c0c8;
    --color-text-muted:       #8888a0;
    --color-text-nav:         #a0a8c8;

    /* Interactive / Brand */
    --color-accent:           #F5BA62;

    /* Navbar */
    --color-nav-bg:           #1e1e28;
    --color-nav-hover:        #2e3850;
    --color-nav-border:       #333344;

    /* Buttons & Inputs */
    --color-btn-bg:           #38383f;
    --color-btn-hover:        #46465a;
    --color-input-border:     #555568;

    /* Status colors */
    --color-streaming-bg:     #1a2d40;
    --color-streaming-border: #3a6a9a;
    --color-neutral-bg:       #3d3d45;
    --color-error-bg:         #3a2020;
    --color-error-border:     #8a4040;
    --color-open-bg:          #1a3d28;
    --color-open-border:      #76CD91;

    /* Danger / Destructive */
    --color-danger:           #e06060;
    --color-danger-hover:     #c04040;
    --color-danger-muted:     #8a3535;

    /* Positive indicator */
    --color-positive:         #76CD91;

    /* Overlays & Shadows */
    --color-modal-overlay:    rgba(0, 0, 0, 0.5);
    --color-shadow:           rgba(0, 0, 0, 0.35);
}