/* --- CSS DESIGN TOKENS --- */
:root {
    /* Light theme tokens */
    --bg:            #f8fafc;
    --surface:       #ffffff;
    --surface-2:     #f1f5f9;
    --border:        #e2e8f0;
    --text:          #0f172a;
    --text-muted:    #64748b;
    --accent:        #f97316;
    --accent-hover:  #ea580c;
    --nav-bg:        rgba(255,255,255,0.90);
    --sidebar-bg:    #ffffff;
    --sidebar-btn-bg:#e8e8e8;
    --sidebar-btn-text:#212121;
    --sidebar-btn-hover-bg:#1f2937;
    --sidebar-btn-hover-text:#e8e8e8;
    --input-bg:      #ffffff;
    --input-border:  #e2e8f0;
    --card-bg:       #ffffff;
    --card-border:   rgba(226,232,240,0.6);
    --modal-bg:      #ffffff;
    --modal-section-bg: #fdfdfe;
    --surface-alt:   #f1f5f9;
    --shadow-color:  rgba(0,0,0,0.08);
}

html.dark {
    --bg:            #191923;
    --surface:       #21212e;
    --surface-2:     #2a2a3a;
    --border:        rgba(255,255,255,0.07);
    --text:          #e8e8f0;
    --text-muted:    #7878a0;
    --nav-bg:        rgba(25,25,35,0.95);
    --sidebar-bg:    #21212e;
    --sidebar-btn-bg:#2a2a3a;
    --sidebar-btn-text:#c8c8e0;
    --sidebar-btn-hover-bg:#f97316;
    --sidebar-btn-hover-text:#ffffff;
    --input-bg:      #2a2a3a;
    --input-border:  rgba(255,255,255,0.1);
    --card-bg:       #21212e;
    --card-border:   rgba(255,255,255,0.07);
    --modal-bg:      #21212e;
    --modal-section-bg: #2a2a3a;
    --surface-alt:   #2a2a3a;
    --shadow-color:  rgba(0,0,0,0.4);
}